[英]Ember bind controller property to query in another controller
So I have a requirement that there should be a panel displaying a users unsubmitted widgets. 因此,我要求应该有一个面板,显示用户未提交的窗口小部件。 Since it has to be in every view, I made into a component that accepts a binding to a count of unsubmitted widgets: 由于必须在每个视图中使用,因此我制作了一个组件,该组件接受对大量未提交小部件的绑定:
# components/unsubmitted-widgets.emblem
.well.text-center
a href="#" My Widgets (#{unsubmittedWidgetsCount})
button.small-button type="button" click="submitWidgets"
strong Submit Widgets
I was thinking that the query for the widgets API would go into the application controller, which all other controllers can bind to 我在想,对小部件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')
So this fires off the request and I get a result. 所以这触发了请求,我得到了结果。 However the view doesn't get updated automatically. 但是,视图不会自动更新。 The view shows My Widgets() on whatever screen I'm on, and when I transition to another route where the view is present, I get the real value, but when I go back to the original page it's still not displaying everything. 该视图在我所处的任何屏幕上都显示My Widgets(),当我切换到存在该视图的另一条路线时,我会获得真正的价值,但是当我返回原始页面时,它仍然无法显示所有内容。
How would I actually go about appropriately binding the value on the page to the length of the returned record set? 我实际上将如何适当地将页面上的值绑定到返回的记录集的长度上?
When you create a property that has a collection as dependency, you must use @each
, like so: 创建具有集合作为依赖项的属性时,必须使用@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')
});
The @each
will run your computed property code to get the count of items that match whenever one or more objects in the identities
array gets the isAvenger
property updated. 每当identities
数组中的一个或多个对象更新isAvenger
属性时, isAvenger
@each
将运行您计算的属性代码以获取匹配项的计数。 For this example, it should show a count of two characters, considering one out of the 3 items has the filtered property set to false. 对于此示例,考虑到3个项目中的一个将filtered属性设置为false,它应该显示两个字符的计数。 The other list, watches the exact same path, but the "formula" is different, outputting the count of 1 character for the example above. 另一个列表监视相同的路径,但是“公式”不同,在上面的示例中,输出的字符数为1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.