0

私は ember を使用するのは初めてですが、基本的にあちこちでいくつかのチュートリアルに従い、API ドキュメントを読んで、すでに慣れています。ただし、チュートリアルでは、より複雑なトピックに深く入り込むことはありません。

詳細は次のとおりです。アイテムのリストを表示する Web ページを既に実装しています。以下は、アプリのさまざまな部分からの関連コードの抜粋です。

// the data model, the view and the controller
App.Item = DS.Model.extend({
    name: DS.attr('string')
});
App.ItemsController = Ember.ArrayController.extend();
App.ItemsView = Ember.View.extend({ templateName: 'items' })

// in the router's corresponding route
connectOutlets: function(router) {
    router.get('applicationController').connectOutlet('items', App.Item.find())
}

// in the handlebars template
<ul class="items">
  {{#each content}}
    <li>{{name}}</li>
  {{/each}}
</ul>

このリストのデータは ember-data を介してリモートでロードされ (上記App.Item.find()のルートのconnectOutletメソッドの呼び出しに注意してください)、ハンドルバー テンプレートがそれを表示し、データの変更に応じてリストを動的に更新します。ここまでが基本のエンバーです。

ここで、リストの上部にテキスト フィールドを配置したいと考えています。ユーザーがこのテキスト フィールドに入力すると、ユーザーが入力した名前と一致する名前の項目のみをフィルタリングして表示することで、リストを更新する必要があります。一致する名前の実際の定義は、この質問には関係ありません。入力された文字列を含む名前、またはそれで始まる名前である可能性があります。

次のステップは、handlebars テンプレートのリストの上にテキストフィールド ビューを含めることです。

<div class="search-bar">
    {{view Ember.TextField}}
</div>
<ul class="items">
  {{#each content}}
    <li>{{name}}</li>
  {{/each}}
</ul>

したがって、この時点での私の質問は次のとおりです。

  • javascript コードでこのテキスト フィールドを参照して、変更を検出するためにリスナーをアタッチするにはどうすればよいですか?
  • さらに重要なことは、リストがフィルター処理されるようにするには、このイベント リスナー内で何をする必要があるかということです。
  • ローカルにロードされたデータをフィルタリングする方法を知りたいのですが、ユーザーが入力するたびにフィルタリングデータをリモートでロードする方法も知りたいです。

実際にはこれよりも少し複雑なものを実装する必要がありますが、その方法を知っておくと役に立ちます。

4

1 に答える 1

4

テキスト フィールドに基づいてコンテンツをフィルター処理する計算済みプロパティをコントローラーに設定できます。

App.ItemsController = Ember.ArrayController.extend({

  // ...

  searchedContent: function() {
    var regexp = new RegExp(this.get('search'));

    return this.get('content').filter(function(item) {
      return regexp.test(item.get('name'));
    });

  }.property('search', 'content.@each.name')
});

次に、テキスト フィールドを にバインドするだけですcontroller.search。例: http://www.emberplay.com#/workspace/2356272909

データをリモートでフィルタリングするには、検索が変更されるたびに、ember データがより多くのアイテムをロードするようにする必要があります。これは、変更があるたびにルーターにイベントを送信することで実行できます。

于 2012-11-15T20:37:39.540 に答える