0

ここにフィドルがあります

テンプレートには、バインドされたプロパティが異なる同じ subView のインスタンスがいくつかあります。これらのバインドされたプロパティがオブザーバーでイベントをトリガーするタイミングを確認できます。サブビュー A と D はトリガーしますが、B と C はトリガーしないことに注意してください。

{{view App.SubView identifier="A" modelDataBinding="view.person.first"}}
{{view App.SubView identifier="B" modelDataBinding="view.person.children"}}
{{view App.SubView identifier="C" modelDataBinding="view.person.children.@each.name"}}
{{view App.SubView identifier="D" modelDataBinding="view.person.children.length"}}

したがって、2部構成の質問:

  1. B や C が発砲しないのはなぜですか?
  2. この Person モデルの子にバインドする適切な方法は何でしょうか?
4

1 に答える 1

1

ここで 2 つのことを混ぜ合わせました: バインディングはオブザーバーと同じではありません。something.@each.name にバインドすることはできません。配列にバインドして @each を観察する必要があります。バインディングは 2 つの値の間の接続であり、@each は実際には値ではありません。コレクション内の各要素のプロパティに依存することをオブザーバー (または計算されたプロパティの依存関係) に伝えるための特別な構文です。

もう 1 つの問題は、値が設定された後にオブザーバーを追加すると、値が既に設定されているため (つまり、変更がないため)、オブザーバーが起動しないことです。あなたの例では、 App.Person.find(1) はすぐにオブジェクトを返し、 person.children も同じことを行います - すぐに配列を返し、後でデータで埋められます。そのため、addObserver を実行した時点で、children は既に設定されており、その内容のみが変更されます (これが、長さオブザーバーが適切に起動する理由です)。

ここにいくつかの変更を加えたフィドルがあります: http://jsfiddle.net/drogus/6EVty/1/ (私はobserverPathを追加し、ビューが挿入された後に人を設定しました)、コード:

<script type="text/x-handlebars" data-template-name="main">
    {{view App.SubView identifier="A" modelDataBinding="view.person.first"}}
    {{view App.SubView identifier="B" modelDataBinding="view.person.children"}}
    {{view App.SubView identifier="C" modelDataBinding="view.person.children" observePath="modelData.@each.name"}}
    {{view App.SubView identifier="D" modelDataBinding="view.person.children.length"}}
</script>

そしてビュークラス：

SubView: Ember.View.extend({
    init: function( ) {
        this._super();
        var observePath = this.get('observePath') || 'modelData';
        this.addObserver( observePath, this, function( ) {
            document.write( 'trigger ' + this.get( 'identifier' ) + ': ', this.get( 'modelData' ), '<br />');
        });
    }
})
于 2013-07-07T22:51:09.370 に答える