如何在Ember.js中进行数组的push/pop操作？

Question

我可以在Ember对象中包含一个数组，并使用Handlebars显示其内容。然而，我只能使用set()方法替换数组的内容。如何使用push/pop等方法修改数组内容并仍然使UI绑定更新？

// JS
App.obj = Ember.Object.create({
    "things": ["1", "2"],
});
App.obj.set("things", ["1", "2", "3"]); // Works
App.obj.things.push("3"); // Doesn't Work

// HTML + Handlebars
{{#with App.obj}}
    <ul>
    {{#each things}}
        <li>{{this}}</li>
    {{/each}}
    </ul>
{{/with}}

- Luke Dennis

Answer 1

Ember.js提供了一个数组包装类Ember.Array / Ember.MutableArray，用于处理集合操作。

因此，不要使用原始的数组，而应使用这些包装类：

// JS
App.obj = Ember.Object.create({
    "things": Ember.A(["1", "2"])
});
App.obj.things.pushObject("3"); // pushObject notifies observers

// HTML + Handlebars
{{#with App.obj}}
    <ul>
    {{#each things}}
        <li>{{this}}</li>
    {{/each}}
    </ul>
{{/with}}

- Michael Siebert

---

pushObject及其相关方法（popObject、removeAt等）的有用参考资料：http://ember-docs.herokuapp.com/symbols/Ember.MutableArray.html - Luke Melia

这里还有一个有用的答案，解释为什么需要使用这些方法：http://stackoverflow.com/questions/14582759/ember-containerview-not-updating-in-response-to-childviews-push - zigomir

Answer 2

使用Ember.ArrayController的实例，简单地声明一个[]数组也会创建Ember.ArrayController类的数组。

如果您想在Ember ArrayController的末尾添加一个对象，可以使用addObject()方法；

例如。

mutableArray:[],

setModel:function(){

var data1={'id':1,'name':'over'};
var data2={'id':3,'name':'out'};

this.get('mutableArray').addObject(data1);
this.get('mutableArray').addObject(data2);

/* To Add Object to middle of array at given index simply use the native array splice method */

var data1={'id':2,'name':'and'}
this.get('mutableArray').splice(1,0,data1);

return this.get('mutableArray')

}.property('mutableArray')

- Mad Scientist

---

现在最好避免使用Ember.ArrayController，因为它已被弃用。 使用Ember.Array或Ember.ArrayProxy类代替。 - SeanK