ember.js - 如何在 ember.js 中迭代数组集合视图

Question

我想迭代一个 Emebrjs 集合 - 每次用户单击下一个时，都会选择以下项目并且其属性会更改：

如何从外部迭代列表视图项？看 -

http://jsfiddle.net/gavriguy/NHxJ4/

var App = Em.Application.create({
    ready: function() {

        App.someItemsView.appendTo('body');
        this._super();
    }
});

App.tempController = Em.ArrayController.create({
    self: this,
    foo: {title:'tt'},
    content: [
        {
        title: 'A',
        unread: true},
    {
        title: 'B',
        unread: false},
    {
        title: 'C',
        unread: false}
    ],
    init: function() {},

    highlightNext: function() {

        var currentItem = this.content.filterProperty('unread', false)[0];
        //How to change the current item's unread to true???

    }


});

App.someItemsView = Ember.CollectionView.create({


    contentBinding: 'App.tempController.content',

    itemViewClass: Ember.View.extend({
        template: Ember.Handlebars.compile('<div>{{content.title}} unread: {{content.unread}}</div>'),
        click: function(event) {

            this.setPath('content.unread', false);
        }
    }),


});​

Answer 1

由于您在App.tempController.content数组中的项目不是Ember.Object's，因此您不能使用content.set('unread', false). 如果要更改非 Ember 对象的属性，可以使用该Ember.setPath函数，请参阅http://jsfiddle.net/pangratz666/7RLDr/：

highlightNext: function() {
    // get all unread items
    var unreadItems = this.content.filterProperty('unread', true);
    // get the first object
    var nextUnreadItem = unreadItems.get('firstObject');
    // check if there is a object at all
    if (nextUnreadItem) {
        // finally set the property
        Ember.setPath(nextUnreadItem, 'unread', false);
    }
}