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')

所以这会触发请求，我得到一个结果。但是视图不会自动更新。视图在我所在的任何屏幕上显示我的窗口小部件（），当我转换到视图所在的另一个路径时，我得到了真正的价值，但当我回到原始页面时，它仍然没有显示一切。

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

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')
});

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

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

1 个答案: