ractivejs - RactiveJS：根据文本输入值过滤 DIV 元素

Question

我一直在尝试找到一个关于如何使用 RactiveJS 基于搜索文本框过滤 div 容器的示例。

我知道如何使用 Ractive 获取按键事件，但不确定如何以 RactiveJS 方式过滤模型。在按键事件期间保留数据的副本/历史记录似乎是个坏主意。我在这里想念什么？

Answer 1

你可以让 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以获得一个很好的例子。

如果您需要跟踪有关过滤列表的其他信息（例如显示匹配项的计数），则使用纯反应式方法会有点困难（请参阅上面 jsfiddle 的版本 /1/），这可能会使使用观察者：

 <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)
        })
    }
})

（参见 jsfiddle 链接的版本 /2/）

Answer 2

如果您的可搜索 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，但同样的逻辑应该可以工作。