Question

为什么我的模板在更改正在呈现的属性时不会更新？ documentation表示{{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中的对象，否则绑定机制将不会知道对该对象所做的更改。

希望它有所帮助。

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

1 个答案: