RactiveJS: фильтрация элементов DIV на основе входного текстового значения

Я пытался найти пример того, как фильтровать контейнер div на основе текстового поля поиска с использованием RactiveJS.

Я знаю, как получить события нажатия клавиш с помощью Ractive, но не знаю, как фильтровать модель способом RactiveJS. Сохранение копий/истории данных во время нажатия клавиши кажется плохой идеей. Что мне здесь не хватает?


ractivejs
person Random Joe    schedule 04.02.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете позволить Ractive управлять им (http://jsfiddle.net/nnbww/):

<div id="container">
  <input name="search" type="text" value="{{searchTerm}}"/>
  {{#items}}
     {{#(..indexOf(searchTerm)===0)}}
         <div>{{.}}</div>
     {{/}}
 {{/items}}
</div>

Вы можете использовать this вместо ., если хотите:

{{# this.indexOf(searchTerm)===0 }}

И поместите функцию в свои данные, а не встроенную:

{{# filter(this) }}

Это также позволит вам сменить фильтр. Посетите http://examples.ractivejs.org/todos, чтобы найти хороший пример этого.

Если вам нужно отслеживать другую информацию о отфильтрованном списке (например, отображать количество совпадающих элементов), немного сложнее использовать чисто реактивный подход (см. версию /1/ вышеприведенного jsfiddle), что, вероятно, упрощает используйте наблюдателя:

 <input name="search" type="text" value="{{searchTerm}}"/>
 {{#filtered}}
     <div>{{.}}</div>
 {{/filtered}}
 Matching {{filtered.length}} of {{items.length}}

установить в полном методе:

var ractive = new Ractive({
    el: 'container',
    template: '#container',
    data: { 
        searchTerm: 'foo',
        items: [ 'foo', 'bar', 'biz', 'bah' ]
    },
    complete: function(){
        var r = this
        r.observe('searchTerm', function(search){
            var filtered = r.get('items').filter(function(item){
                return item.indexOf(search)===0
            })
            r.set('filtered', filtered)
        })
    }
})

(см. версию /2/ ссылки jsfiddle)

person martypdx    schedule 04.02.2014

arrow_upward
0
arrow_downward

Если ваши доступные для поиска div являются статическими, вы можете поместить наблюдателя в свой поисковый запрос: http://jsfiddle.net/fLd86/10/

ractive = new Ractive({
el: 'container',
template: '#container',
data: { searchTerm: 'foo' }
});

observer = ractive.observe( 'searchTerm', function ( newValue, oldValue, keypath ) {
    $( 'div.searchable:contains("' + newValue +'")').show();
    $( 'div.searchable:not(:contains("' + newValue +'"))').hide();
});

Если элементы div являются частью вашей модели, вам нужно будет что-то добавить в шаблон, чтобы внедрить их в html, но такая же логика должна работать.

person Gavin Kelly    schedule 04.02.2014