templates - Ember，我的模板不会在属性更改时更新

Question

当我更改它正在呈现的属性时，为什么我的模板没有更新？ documentation声明 {{each}}是绑定(bind)感知的，但显然有一些我不知道的东西。

Like everything in Handlebars, the {{#each}} helper is bindings-aware. If your application adds a new item to the array, or removes an item, the DOM will be updated without having to write any code.

这是我的 Controller

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>

数据已正确呈现，当我单击按钮时，它会将元素附加到属性，但模板不会刷新。为什么？如何使其与我的数据保持同步？

Answer 1

您的模板没有更新，因为您使用的是普通的 javascript .push而不是由 ember 提供的 .pushObject和 .removeObject分别。 Ember 默认扩展了数组原型(prototype)，使其在绑定(bind)感知环境中运行良好。

因此，要更新您的模板，您应该执行以下操作:

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');此外，您应该始终使用 .get()和 .set()在 ember 中访问对象，否则绑定(bind)机制将不知道对对象所做的更改。

希望能帮助到你。