4

複数のアイテムを選択し、すべて/なしを選択して現在選択されている行の数を確認できるリストで構成される小さなアプリを構築する方法を理解しようとしています。

「選択された」状態はモデルオブジェクトの一部であってはならないと思いますが、実際にそれを行う方法がわかりません。

これは私の現在のセットアップです（明らかにまだ機能していません）

実行可能なコードhttp://jsfiddle.net/jacobk/rU35G/1/

var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
    model: function() { return Ember.A(["Foo", "Bar", "Baz"]); }
});

App.ApplicationController = Ember.ArrayController.extend({
    allSelected: false,

    selectedCount: function() {
        return 0;
    }.property()
});

App.RowController = Ember.ObjectController.extend({
    isSelected: false
});

<script type="text/x-handlebars" data-template-name="application">
    <h3>{{ selectedCount }} rows selected.</h3>
    <label>
    {{view Ember.Checkbox checkedBinding="allSelected"}}
        Toggle select all
    </label>
    <hr/>
    <ul>
    {{#each controller itemController="row"}}
        <li {{bindAttr class="isSelected"}}>
            {{view Ember.Checkbox checkedBinding="isSelected"}} {{this.content}}
        </li>
    {{/each}}
    </ul>
</script>
  • 個々の「行項目」は、行ごとのカスタム ビュー、または上記のフィドルのようなカスタム コントローラーを使用して制御する必要があります。
  • 「すべて選択」を ArrayController からすべての個々のコントローラー (またはそれが適切な場合はビュー) に伝達する方法

バインディング、オブザーバー、プロパティ、「ニーズ」などをいつ使用するか、コントローラーとビューなどをいつ使用するのが適切かを理解しようとしています。私はまだ、ember アプリの情報/データの一般的な流れを理解していません。

たとえば、上記の例の ArrayController は、「含まれている」ビュー/コントローラーを反復処理し、「すべて選択」チェックボックスが切り替えられたときに「選択済み」状態を変更する必要がありますか、またはすべての「サブコントローラー」が監視/「バインディングを持っている」必要がありますArrayController を変更し、それが変更されたときに自分自身を変更します。そうであれば、どのようにデータを反対方向に伝播する必要がありますか。ArrayController はどのようにして「現在選択されているすべて」の行を取得しますか?

これに対する「標準的な解決策」を見たいと思います。

4

2 に答える 2

1

行コントローラーは必要ありません。以下に示すように、@each、計算されたプロパティ、およびcheckedbindingを使用してこれを解決できます。isSelected は、arraycontroller のコンテンツで定義する必要があります。

    App.ApplicationController = Ember.ArrayController.extend({

        allSelected: function(key, value) {
    if ( value !== undefined ) {
     // when check box is ticked, this gets executed
      this.setEach( 'isSelected', value );
      return value;
    } else {
        //as a computed property
      return !!this.get( 'length' ) &&
        this.everyProperty( 'isSelected', true );
    }
  }.property('@each.isSelected')

        selectedCount: function() {
            return 0;
        }.property()
    });
于 2013-02-22T12:53:29.990 に答える
0

選択した状態をモデルから除外することに同意します。itemControllerEmber.ArrayController でを定義する必要があります。

これが実際の例です。http://jsbin.com/sunat/3/edit

App.RowController = Ember.ObjectController.extend({
  isSelected: false
});

App.IndexController = Ember.ArrayController.extend({
  itemController: 'row',

  selectAll: function(key, value) {

    if (arguments.length == 2) {
      this.setEach('isSelected', value);

      return value;
    } else {

      return this.isEvery('isSelected', true);
    }
  }.property('@each.isSelected')
});

#template
<script type="text/x-handlebars" id="index" >
  <label>
    {{input type="checkbox" checked=selectAll}}
    Toggle select all
  </label>
  <hr/>
  <ul>
  {{#each}}
    <li>
      {{input type="checkbox" checked=isSelected}} {{name}}
    </li>
  {{/each}}
  </ul>
</script>
于 2014-03-06T00:16:00.957 に答える