javascript - example - Emberjs-Conectando una barra de filtro{{input}} con mi lista de Objetos. Mientras escribo, los filtros de lista

filter javascript example

Question

Estoy intentando incorporar este ejemplo de trabajo http://jsbin.com/AViZATE/37/edit de una barra de búsqueda de filtrado con mi propio proyecto. La barra de búsqueda no parece estar conectada a mi lista de objetos. :(

Déjame mostrarte lo que hice.

App.RecordCategoriesController = Ember.ArrayController.extend({
    searchResult: function(){
        var searchTerm = this.get(''searchTerm'');
        var regExp = new RegExp(searchTerm,''i'');
        this.get(''model'').set(''content'',this.store.filter(''recordCategory'',function(item){
            return regExp.test(item.get(''categoryName''));
        }));
    }.observes(''searchTerm''),
});

Como puede ver arriba, he reemplazado '' todo '' con '' recordCategory '' y '' title '' con '' categoryName ''. Parece bueno hasta ahora.

En record_categories.hbs he creado la barra de entrada que se usará para filtrar.

{{input type="text" id="search-todo" placeholder="Search Todo List..." value=searchTerm}}

y luego debajo de él, cada uno de los manillares para recorrer y mostrar mi lista

{{#each itemController="recordCategory"}}
  <li>{{categoryName}}</li>
{{/each}}

¿Me estoy perdiendo de algo? Noté que SearchResults no parece ser llamado en ningún otro lado en su ejemplo

También aquí está mi ruta, porque por qué no.

App.RecordCategoriesRoute = Ember.Route.extend({     
    model: function() {
        VpcYeoman.RecordCategories.FIXTURES=[];
        $.ajax({
            url: ''/recordCategories'',
            dataType: ''json'',
            type:"get",      
            async: false,
            success : function(data, textStatus, xhr) { 
                if(xhr.status==200){
                    VpcYeoman.RecordCategories.FIXTURES=data;
                }
            }
        });
        return this.store.find(''recordCategories'');
    }
}); 

Answer 1

Trataré principalmente de ignorar el JSBin y mirar lo que tienes, ya que creo que eso te ayudará más. Entonces, si echo algo obvio de JSBin, házmelo saber.

Lo primero que debe observar es que, a partir de su ruta, devuelve una matriz de objetos. Ember normalmente generaría un ArrayController por ti, pero tú mismo lo has extendido. Y lo que es especial (y agradable) sobre ArrayController es que su contenido es la matriz. Entonces en tu plantilla, podrías hacer esto:

{{#each}}
    {{categoryName}}
{{/each}}

Y eso enumeraría todos los elementos que se devolvieron de this.store.find(''recordCategories'') .

Pero desea filtrar sus artículos, así que eso no es bueno. Pasemos al punto dos. La mejor manera de filtrar una lista de elementos es mediante el uso de una propiedad calculada de solo lectura. Definitivamente no desea establecer el contenido del modelo para los elementos filtrados. Desea que los elementos originales permanezcan intactos, y el filtro sea solo una forma determinada de mirar los elementos originales. Entonces, usando un ejemplo ligeramente modificado de aquí , hagámoslo.

App.RecordCategoriesController = Ember.ArrayController.extend({

    searchResults: function() {
        var searchTerm = this.get(''searchTerm'');
        var regExp = new RegExp(searchTerm,''i'');

        // We use `this.filter` because the contents of `this` is an array of objects
        var filteredResults = this.filter(function(category) {
            return regExp.test(category.get(''categoryName''));
        });

        return filteredResults;
    }.property(''@each.categoryName'', ''searchTerm'')

});

Entonces, ahora tiene una propiedad calculada que filtra los elementos en el controlador de matriz en función del término de búsqueda. Y debido a sus dependencias, volverá a encapsularse cada vez que cambien los elementos o cambie el término de búsqueda. Y de esta manera, no tuvo que cambiar ningún valor de modelo. Finalmente, lo usarías así:

// record_categories.hbs

{{input type="text" id="search-todo" placeholder="Search Todo List..." value=searchTerm}}

{{#each searchResults}}
    {{categoryName}}
{{/each}}

Y solo para asegurarme de que no estaba completamente BSing, creé un JSBin para mostrar que funciona.