0

RactiveJS を使用して、検索テキスト ボックスに基づいて div のコンテナーをフィルター処理する方法の例を見つけようとしています。

Ractive を使用してキーが押されたイベントを取得する方法は知っていますが、RactiveJS の方法でモデルをフィルタリングする方法はわかりません。キー押下イベント中にデータのコピー/履歴を保持することは、悪い考えのようです。ここで何が欠けていますか？

4

2 に答える 2

4

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/ を参照)

于 2014-02-04T17:59:09.060 に答える
0

検索可能な 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 に挿入するためにテンプレートに何かを配置する必要がありますが、同じ種類のロジックが機能するはずです。

于 2014-02-04T10:34:03.983 に答える