Ich bin neu im Umgang mit Ember, aber bereits damit vertraut. Ich folge hier und da ein paar Tutorials und lese die API-Dokumente. Tutorials gehen jedoch nicht zu tief in komplexere Themen ein.

Dies sind die Details: Ich habe bereits eine Webseite implementiert, auf der eine Liste von Elementen angezeigt wird. Das Folgende sind die relevanten Code-Auszüge aus verschiedenen Teilen der App.

// the data model, the view and the controller
App.Item = DS.Model.extend({
    name: DS.attr('string')
});
App.ItemsController = Ember.ArrayController.extend();
App.ItemsView = Ember.View.extend({ templateName: 'items' })

// in the router's corresponding route
connectOutlets: function(router) {
    router.get('applicationController').connectOutlet('items', App.Item.find())
}

// in the handlebars template
<ul class="items">
  {{#each content}}
    <li>{{name}}</li>
  {{/each}}
</ul>

Die Daten für diese Liste werden aus der Ferne über Glutdaten geladen (beachten Sie dieApp.Item.find() Rufen Sie die Route anconnectOutlet Methode oben) und eine Lenkervorlage zeigt sie an und aktualisiert die Liste dynamisch, wenn sich die Daten ändern. Bis hierher ist dies grundlegende Glut.

Jetzt möchte ich ein Textfeld oben in der Liste haben. Wenn der Benutzer dieses Textfeld eingibt, sollte die Liste aktualisiert werden, indem nur die Elemente mit einem Namen gefiltert und angezeigt werden, der der Eingabe des Benutzers entspricht. Die tatsächliche Definition, was ein passender Name ist, ist für diese Frage irrelevant. Es können die Namen sein, die die eingegebene Zeichenfolge enthalten oder die damit beginnen.

Ich weiß, dass mein nächster Schritt darin besteht, eine Textfeldansicht oben auf der Liste in die Lenkervorlage aufzunehmen:

<div class="search-bar">
    {{view Ember.TextField}}
</div>
<ul class="items">
  {{#each content}}
    <li>{{name}}</li>
  {{/each}}
</ul>

Meine Fragen an dieser Stelle lauten also wie folgt:

Wie beziehe ich mich im Javascript-Code auf dieses Textfeld, damit ich einen Listener daran anhängen kann, um zu erkennen, wenn sich etwas ändert?Und was muss ich vor allem in diesem Ereignis-Listener tun, damit die Liste gefiltert wird?Ich würde gerne wissen, wie dies durch Filtern der lokal geladenen Daten erreicht wird, aber auch, wie dies durch ferngesteuertes Laden der Filterdaten bei jeder Benutzereingabe erreicht wird.

Eigentlich muss ich etwas Komplexeres implementieren, aber es hilft, zu wissen, wie man das macht.