Ember,我的模板不会更新属性更改

Question

当我更改它正在渲染的属性时,为什么我的模板不会更新？该文件指出,{{each}}为绑定感知,但显然事情它,我不知道的.

与Handlebars中的所有内容一样,{{#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>

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

Answer 1

您的模板没有更新,因为你是使用JavaScript普通的香草.push,而不是由余烬提供.pushObject和.removeObject分别.默认情况下,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'); 另外你应该总是使用.get()和.set()访问ember中的对象,否则绑定机制将不会知道对对象所做的更改.

希望能帮助到你.