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的version /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中，但是同样的逻辑应该可以工作。