Question

如果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;
})

在组件模板中，列表中的每个项目都包含在link-to中，该item链接到显示单个项目的item路由。

在winning模板甚至路线中，我希望观察相应组件上显示或隐藏某些内容的closed和item个计算机。 2.2.0模板（IE。如果项目已关闭，则隐藏出价部分等）

这样做的正确方法是什么？

顺便说一下，我在Ember 2.2.0 Ember数据1.13.13和Ember-cli jdk1.8.0_45

Answer 1

如果您的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（数据向下，操作向上）并将组件中的操作发送到控制器，但这仅在组件位于控制器的视图，这与你正在做的事情不同。

第二种方式（这不是真正理想的IMO）将是以某种发布/子方式使用服务，这将允许远程组件/控制器相互通信（you can read more about this method here）。就这样做而言，你可能会得到混合的回应，因为它可能会破坏你的应用程序的数据流。但有时候你的选择是有限的。

说了这些，我可能会坚持在控制器中重新计算，而不是试图通过你的应用程序从一个控制器向另一个控制器发送数据。最后，它仍然会减少代码，减少框架的工作量。希望这有用。

在链接到它的组件上观察属性的路由

1 个答案: