灰烬绑定控制器属性以在另一个控制器中查询

Question

因此，我要求应该有一个面板，显示用户未提交的窗口小部件。 由于必须在每个视图中使用，因此我制作了一个组件，该组件接受对大量未提交小部件的绑定：

# components/unsubmitted-widgets.emblem
.well.text-center
    a href="#" My Widgets (#{unsubmittedWidgetsCount})
    button.small-button type="button" click="submitWidgets"
      strong Submit Widgets

我在想，对小部件API的查询将进入应用程序控制器，所有其他控制器都可以绑定到该应用程序控制器

App.ApplicationController = Ember.Controller.extend
  unsubmittedWidgets: (->
    @store.find('unsubmittedWidget', user: @get('currentUser'))
  ).property()

App.HomeController = Ember.Controller.extend
  needs: ["application"]
  unsubmittedWidgetCount: (->
    @get('controllers.application.unsubmittedWidgets').toArray().length
  ).property('controllers.application.unsubmittedWidgets')

所以这触发了请求，我得到了结果。 但是，视图不会自动更新。 该视图在我所处的任何屏幕上都显示My Widgets（），当我切换到存在该视图的另一条路线时，我会获得真正的价值，但是当我返回原始页面时，它仍然无法显示所有内容。

我实际上将如何适当地将页面上的值绑定到返回的记录集的长度上？

Answer 1

创建具有集合作为依赖项的属性时，必须使用@each ，如下所示：

App.HeroesController = Ember.Controller.extend({
  identities: [
    Em.Object.create({ mask: 'Captain America', name: 'Steve Rogers', isAvenger: true }),
    Em.Object.create({ mask: 'Iron Man', name: 'Tony Stark', isAvenger: true }),
    Em.Object.create({ mask: 'Batman', name: 'Bruce Wayne', isAvenger: false }),
  ],
  justiceLeague: function() {
    var identities = this.get('identities');
    return identities.filterBy('isAvenger', false).get('length');
  }.property('identities.@each.isAvenger'),
  avengers: function() {
    var identities = this.get('identities');
    return identities.filterBy('isAvenger', true).get('length');
  }.property('identities.@each.isAvenger')
});

每当identities数组中的一个或多个对象更新isAvenger属性时， isAvenger @each将运行您计算的属性代码以获取匹配项的计数。 对于此示例，考虑到3个项目中的一个将filtered属性设置为false，它应该显示两个字符的计数。 另一个列表监视相同的路径，但是“公式”不同，在上面的示例中，输出的字符数为1。