Ember.js 观察链接到它的组件上的属性的路由
我有一个列表,如果Ember.js 观察链接到它的组件上的属性的路由,ember.js,components,ember-cli,computed-properties,Ember.js,Components,Ember Cli,Computed Properties,我有一个列表,如果项目路由中的项目使用组件事件项目来显示每个项目。这个组件上有两个计算的,正在设置一些类,向用户显示关于每个项目的一些信息 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_
项目
路由中的项目使用组件事件项目
来显示每个项目。这个组件上有两个计算的,正在设置一些类,向用户显示关于每个项目的一些信息
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;
})
在组件模板中,列表中的每个项目都包装在一个链接到项目的链接中,该链接链接到项目
路线,该路线显示单个项目
在项目
模板甚至路线中,我想观察相应组件上的中奖
和关闭
计算值,以显示或隐藏项目
模板中的某些内容(即,如果项目关闭,隐藏投标部分等)
正确的方法是什么
顺便说一句,我在Ember2.2.0
Ember Data2.2.0
和Ember cli1.13.13
上,如果您的事件项
组件链接到项
路由,我假设您正在将项模型传递到链接到
助手,这意味着计算这些属性所需的所有属性仍将在项
控制器中可用
// 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}}
//templates/which-template-holds-items.hbs
{{{#每个项目作为|项目}
{{event item model=item}}
{{/每个}}
//模板/组件/事件项.hbs
{{链接到'item'模型}}//将模型传递到item路由
//控制器/item.js
从“余烬”导入余烬;
导出默认的Ember.Controller.extend({
//包括用户服务
获胜:Ember.computed.equal('model.item_high_bid_user_id','userService.user_id'),
关闭:余烬计算相等('model.item_status',2)
});
//模板/item.hbs
{{{如果获胜}
//展示获奖作品
{{/if}
{{#如果关闭}
//展示封闭的东西
{{/if}
另外,我注意到您发布的代码中的条件语句混合了=
和=
。大多数情况下,您都希望使用==
差点忘了-
更新(回应您下面的评论)
有两种方法可以提醒控制器组件中的值已更改,但在当前情况下,这两种方法都不起作用
第一种方法(可以这样做)是遵循DDAU(数据向下,操作向上)并将操作从组件发送到控制器,但这仅在组件位于控制器视图内时有效,而您所做的不是这样
第二种方法(在IMO中并不理想)是以某种发布/订阅方式使用服务,这将允许远程组件/控制器相互通信()。这样做可能会对您的应用程序的数据流造成破坏,因此您可能会得到不同的响应。但有时你的选择是有限的
说到这里,我可能会坚持在控制器中重新计算,而不是试图通过应用程序将数据从一个控制器发送到另一个控制器。最终,框架的代码和工作仍然会更少。希望这有帮助。我不知道computed.equal
我会切换到它,谢谢你的指针。那么你在这里说的是,我确实需要重新定义项目控制器上的计算值?这基本上就是我现在正在做的,但这意味着我在两个地方有计算的,我只是想也许有办法减少重复的数量。@Jordan我更新了我的答案以回应你的评论。