2013-12-03 3 views
2

У меня есть следующие автозаполнение компонента: Первоначальная идея от EmberCasts: Building an Autocomplete Widget Part 1ember.js Как правильно фильтровать модель в компоненте

App.AutoCompleteComponent = Ember.Component.extend({ 
    searchText: null, 

    searchResults: function() { 
     var model = this.get('model'); 
     var searchText = this.get('searchText'); 

     console.log(this.get('model')); // shows array 

     if (searchText){ 
      console.log('searching for: ' + searchText); // shows up in console with searchText 

      var regex = new RegExp(searchText, 'i'); 
      model = model.filterBy('name', function(name) { 
       console.log(name); // never got reached 
       return name.match(regex); 
      }); 
     } 

     return model; 
    }.property('searchText') 
}); 

Мой шаблон:

{{auto-complete model=controllers.categories}} 

<script type="text/x-handlebars"s data-template-name="components/auto-complete"> 
    {{input type="text" value=searchText placeholder="Search..."}} 
    <ul> 
     {{#each searchResults}} 
     <li>{{this}}</li> 
     {{/each}} 
    </ul> 
</script> 

Проблема в том, что модель не возвращается. В начальном состоянии программы показаны все мои категории - я скоро это исправлю. Но это показывает мне, что компонент автозаполнения работает. Сначала модель возвращается. Я думаю, что FilterBy не то, что я ожидаю от этого.

Я попытался изменить часть FilterBy к этому и искать именно по названию:

model = model.filterBy('name', searchText); 

Но это тоже не работает. Есть идеи?

ответ

3

вы второй подход является правильным с filterBy, если вы хотите передать функцию, вы бы использовали filter.

model = model.filterBy('name', searchText); 

Мое мнение, что на ваших моделях не указано, или что-то в этом роде. Если вам нужна дополнительная помощь, покажите нам пример модели категорий.

http://emberjs.jsbin.com/oTIxAjI/1/edit

Вы хотите использовать фильтр

http://emberjs.jsbin.com/oTIxAjI/4/edit

+0

Ваш JS бен действительно работает. Но только для точного совпадения. Я хочу, чтобы он нашел элемент красного цвета только с «r». Я думал, что это можно сделать с помощью filterBy. Здесь у вас есть отредактированный js bin с моей моделью внизу: http://emberjs.jsbin.com/oTIxAjI/3/edit?html,js,output – DelphiLynx

+1

использовать фильтр затем, см. Пример выше – Kingpin2k

+0

Большое спасибо, не видели использование 'filter' раньше! Я отредактировал js bin так, чтобы он также не учитывал регистр: http://emberjs.jsbin.com/oTIxAjI/8/edit – DelphiLynx

Смежные вопросы