6

レンダリング中のプロパティを変更しても、テンプレートが更新されないのはなぜですか? ドキュメントにはバインディングを認識していると記載されて{{each}}いますが、明らかに私が認識していないことがあります。

ハンドルバーのすべてと同様に、{{#each}} ヘルパーはバインディングを認識します。アプリケーションが配列に新しいアイテムを追加したり、アイテムを削除したりすると、コードを書かなくても DOM が更新されます。

これが私のコントローラーです

App.MaintemplateController = Ember.Controller.extend({
  alist: ['foo', "bar"],        
  actions : {   
    addel: function(){
            this.alist.push('xpto');
            console.log(this.alist);
     }
   }
});

私のテンプレートには、次のコードがあります。

{{#each alist}}
    <li>{{.}}</li>
{{/each}}
<button {{action 'addel'}}>Add element</button>

データは適切にレンダリングされ、ボタンをクリックすると要素がプロパティに追加されますが、テンプレートは更新されません。なんで？データとの同期を維持するにはどうすればよいですか?

4

1 に答える 1

16

.push提供された ember.pushObjectと.removeObjectそれぞれの代わりにプレーンなバニラ JavaScript を使用しているため、テンプレートは更新されません。Ember はデフォルトで配列プロトタイプを拡張して、バインディングを意識した環境でうまく動作するようにします。

したがって、テンプレートを更新するには、次のことを行う必要があります。

App.MaintemplateController = Ember.Controller.extend({
  alist: ['foo', "bar"],        
  actions : {   
    addel: function(){
      this.get('alist').pushObject('xpto');
      console.log(this.get('alist'));
    }
  }
});

ここで重要な行は、this.get('alist').pushObject('xpto'); さらに、ember のオブジェクトにアクセスするには常に.get()and.set()を使用する必要があるということです。そうしないと、バインディング メカニズムはオブジェクトに加えられた変更を認識しません。

それが役に立てば幸い。

于 2013-09-05T08:52:09.620 に答える