7

私はember1.0.0-pre4を使用しています。

モデルインスタンスのリストを表示したい。ユーザーは、各行内に表示されるボタンまたはチェックボックスをクリックして、リストエントリをいくつでも選択できる必要があります。

なんとかリストを表示できました。しかし、選択状態を管理する方法がわかりません。テンプレートに次のようなものを入れると{{view Ember.Checkbox checkedBinding="isSelected"}}、選択状態がモデルに保持されます。しかし、私はこれが最高の場所だとは思いません。選択状態はコントローラーまたはビュー状態に属していると思います。

（複数の）リスト選択状態を保存してアクセスするための最良の方法を教えてください。

4

1 に答える 1

8

1つの方法は、コントローラーに2番目のリストを保持することです。

App.FooController = Ember.ArrayController.create({
  selectedContent: [],
  selectToggle: function(event) {
    var selectedContent;
    selectedContent = this.get(selectedContent);
    if (selectedContent.contains(event.context)) {
      return this.set('selectedContent', selectedContent.without(event.context));
    } else {
      return this.get('selectedContent').push(event.context);
    }
  }
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each foo in controller}}
          <li {{action selectToggle foo}}>{{foo.name}}</li>
    {{/each}}
  </ul>
</script>

これは、コントローラーに個別のリストを保持し、アイテムが選択されたかどうかに基づいてプッシュ/削除するだけです。

Ember.ObjectProxyを使用して、「isSelected」プロパティでfooオブジェクトの値を拡張することもできます。

App.FooController = Ember.ArrayController.create({
  selectedContent: @get('content').map(function(item){
    Ember.ObjectProxy.create({ 
      content: item
      isSelected: false
    });
  }); 
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each foo in controller.selectedContent}}
          <li {{bindAttr class= "foo.isSelected"}}{{action selectToggle foo}}>{{foo.name}}</li>
    {{/each}}
  </ul>
</script>

次に、selectToggleメソッドで、fooのisSelectedプロパティを適切に設定します。

于 2013-02-07T10:03:10.097 に答える