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中，但同样的逻辑也应该有效。

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

2 个答案: