在链接到它的组件上观察 属性 的路由
Route that observes property on component that links to it
我有一个列表,如果 items
路线中的项目使用组件 event-item
来显示每个项目。该组件有两个计算器,现在正在设置一些 类 以向用户显示有关每个项目的一些信息...
classNameBindings: ['winning','closed'],
item: null,
winning: Ember.computed('item.item_high_bid_user_id','userService.user_id',function(){
return this.get('item.item_high_bid_user_id') == this.get('userService.user_id');
}),
closed: Ember.computed('item.item_status',function(){
return this.get('item.item_status') === 2;
})
在组件模板中,列表中的每个项目都包装在链接到 item
路由的 link-to
中,后者显示单个项目。
在 item
模板甚至路由中,我想观察相应组件上的 winning
和 closed
计算,以显示或隐藏 item
模板(即,如果某项已关闭,则隐藏出价部分等)
执行此操作的正确方法是什么?
顺便说一句,我在 Ember 2.2.0
Ember 数据 2.2.0
和 Ember-cli 1.13.13
如果您的 event-item
组件链接到 item
路由,我假设您将项目模型传递给 link-to
助手,这意味着计算所需的所有属性这些属性仍将在 item
控制器中可用。
// templates/whichever-template-holds-items.hbs
{{#each items as |item|}}
{{event-item model=item}}
{{/each}}
// templates/components/event-item.hbs
<div>
{{link-to 'item' model}} // pass model to item route
</div>
// controllers/item.js
import Ember from 'ember';
export default Ember.Controller.extend({
// include userService
winning: Ember.computed.equal('model.item_high_bid_user_id','userService.user_id'),
closed: Ember.computed.equal('model.item_status', 2)
});
// templates/item.hbs
{{#if winning}}
// show winning stuff
{{/if}}
{{#if closed}}
// show closed stuff
{{/if}}
此外,我注意到您在发布的代码中混合使用了 ==
和 ===
作为条件语句。大多数时候你会想要使用 ===, see this post.
差点忘了 - Ember.computed.equal
更新(回应您在下方的评论)
有几种方法可以提醒控制器组件中的值已更改,但在您当前的情况下,这两种方法都不太有用。
第一种方法(可以这样做)是遵循 DDAU(数据向下,操作向上)并将操作从您的组件发送到您的控制器,但这仅适用于组件在控制器的视图内,而您正在做的事情并非如此。
第二种方式(在我看来这并不是理想的方式)是以某种 pub/sub 的方式使用服务,这将允许远方的 component/controllers 彼此交谈(you can read more about this method here).就以这种方式做事而言,您可能会得到不同的反应,因为它可能会破坏您应用程序的数据流。但有时你的选择是有限的。
综上所述,我可能会坚持在控制器中重新计算,而不是尝试通过您的应用程序将数据从一个控制器发送到另一个控制器。最终它仍然会是更少的代码和更少的框架工作。希望这对您有所帮助。
我有一个列表,如果 items
路线中的项目使用组件 event-item
来显示每个项目。该组件有两个计算器,现在正在设置一些 类 以向用户显示有关每个项目的一些信息...
classNameBindings: ['winning','closed'],
item: null,
winning: Ember.computed('item.item_high_bid_user_id','userService.user_id',function(){
return this.get('item.item_high_bid_user_id') == this.get('userService.user_id');
}),
closed: Ember.computed('item.item_status',function(){
return this.get('item.item_status') === 2;
})
在组件模板中,列表中的每个项目都包装在链接到 item
路由的 link-to
中,后者显示单个项目。
在 item
模板甚至路由中,我想观察相应组件上的 winning
和 closed
计算,以显示或隐藏 item
模板(即,如果某项已关闭,则隐藏出价部分等)
执行此操作的正确方法是什么?
顺便说一句,我在 Ember 2.2.0
Ember 数据 2.2.0
和 Ember-cli 1.13.13
如果您的 event-item
组件链接到 item
路由,我假设您将项目模型传递给 link-to
助手,这意味着计算所需的所有属性这些属性仍将在 item
控制器中可用。
// templates/whichever-template-holds-items.hbs
{{#each items as |item|}}
{{event-item model=item}}
{{/each}}
// templates/components/event-item.hbs
<div>
{{link-to 'item' model}} // pass model to item route
</div>
// controllers/item.js
import Ember from 'ember';
export default Ember.Controller.extend({
// include userService
winning: Ember.computed.equal('model.item_high_bid_user_id','userService.user_id'),
closed: Ember.computed.equal('model.item_status', 2)
});
// templates/item.hbs
{{#if winning}}
// show winning stuff
{{/if}}
{{#if closed}}
// show closed stuff
{{/if}}
此外,我注意到您在发布的代码中混合使用了 ==
和 ===
作为条件语句。大多数时候你会想要使用 ===, see this post.
差点忘了 - Ember.computed.equal
更新(回应您在下方的评论)
有几种方法可以提醒控制器组件中的值已更改,但在您当前的情况下,这两种方法都不太有用。
第一种方法(可以这样做)是遵循 DDAU(数据向下,操作向上)并将操作从您的组件发送到您的控制器,但这仅适用于组件在控制器的视图内,而您正在做的事情并非如此。
第二种方式(在我看来这并不是理想的方式)是以某种 pub/sub 的方式使用服务,这将允许远方的 component/controllers 彼此交谈(you can read more about this method here).就以这种方式做事而言,您可能会得到不同的反应,因为它可能会破坏您应用程序的数据流。但有时你的选择是有限的。
综上所述,我可能会坚持在控制器中重新计算,而不是尝试通过您的应用程序将数据从一个控制器发送到另一个控制器。最终它仍然会是更少的代码和更少的框架工作。希望这对您有所帮助。