Question

我有一个产品列表，我想将其添加到另一个控制器上的数组中以获取消息。我已经为产品模型创建了一个objectcontroller，这样我就可以切换一个“selected”属性（工作正常）但是我的消息控制器中的观察者没有触发。下面是产品的对象控制器：

App.ProductController = Ember.ObjectController.extend({
    selected: false,
    actions:{
        toggleSelected: function(){
            this.set('selected', !this.get('selected'));
        }
    }
});

这是消息控制器 - 产品只是用于测试，但我（/我可以）为这样的列表声明一个itemcontroller吗？

App.MessagesNewController = Ember.Controller.extend({
    needs: ['product'],
    products: [{name: 'product 1', id: 1}, {name: 'product 2', id: 2}],
    selectedProducts: function(){
        var products = this.get('products');
        return products.filterBy('selected', true);
    }.observes('products.@each.selected')

});

和模板：

{{#each product in products itemController="product"}}
    <div {{bind-attr class=":well product.selected"}} {{action 'toggleSelected'}}>
        {{product.name}}
    </div>
{{/each}}

我对Ember很新，所以我很欣赏这类事情的任何方向或最佳实践。感谢

注意：我也在使用余烬数据，如果这有任何区别的话。

Answer 1

您需要在selected上初始化属性products，否则当您在控制器上切换属性时，它不会传播回它们。有关工作示例，请参阅http://emberjs.jsbin.com/kiludiwutuyu/1/edit?html,js,output。

希望这有帮助。

Answer 2

你几乎在那里，你只是缺少一些东西......

1）数据应该加载到`Route的model钩子中。像这样......

App.MessagesRoute = Ember.Route.extend({
  model: function(){
    return [{name: 'product 1', id: 1}, {name: 'product 2', id: 2}]
  }
});

2）App.MessagesController应该是Ember.ArrayController，因为它包装了一组数据。像这样......

App.MessagesController = Ember.ArrayController.extend()

3）您可以在itemController上指定App.MessagesController属性，以便它将数组中的每个项目包装在项目控制器中。

如果您按照所有这些步骤操作，那么您可以通过执行类似的操作来遍历模板中的项目。

{{#each}} <-- if you dont specify what to loop through
              it will loop through the arrayControllers items
              which in this case will be the products wrapped in 
              an itemController
  {{name}}
{{/each}}

您还可以通过执行以下操作来获取所选项目。

this.filterBy('selected', true);

将它们放在一起它看起来像......

App.MessagesRoute = Ember.Route.extend({
  model: function(){
    return [{name: 'product 1', id: 1}, {name: 'product 2', id: 2}]
  }
});

App.ProductController = Ember.ObjectController.extend({
    actions:{
        toggleSelected: function(){
            this.toggleProperty('selected');
        }
    }
});

App.MessagesController = Ember.ArrayController.extend({
    itemController: 'product',
    selectedProducts: function(){
        return this.filterBy('selected', true);
    }.property('@each.selected')

});

此处的工作箱：http://emberjs.jsbin.com/jucab/2/edit

Ember将列表项添加到数组

2 个答案: