只有在模型的路线上，我如何才能在列表中呈现模型的模板？ [英] How can I render a model's template in a list, only when on the model's route?

问题描述

我正在迭代一个条目列表，并希望在列表中显示每个条目的内容，但仅在相应条目的路线上。

ie - 在路线上 / entries / 2

  *链接到条目1 
 *链接到条目2 
 
条目2的内容
 
 *链接到条目3 
  

不幸的是，似乎我不能在 {{...}中使用 {{outlet}} #each entry}} 循环。

最初我试图将 isActive 设置为true在路径下的 setupController 中，并在模板中检查，但是当您导航到<$ c $时，似乎没有一个很好的方法来删除该标志c> / entries / 3 （ deactivate 只适用于从 / entries /：entry_id 完全）。请参阅与SetupController相反？了解更多

使用Ember执行此操作的最佳方法是什么？

解决方案

您可以使用 itemController 与 {{each}} 并在该项目上设置一个计算属性控制器确保当前的模型属性等于 App.EntryRoute 当前模型。

所以你将有以下路由设置：

  App.Router.map（function ）{
 this.resource（'entries'，{path：'/'}，function（）{
 this.resource（'entry'，{path：'：entry_id'}）; 
}）; 
}）; 
  

以下模板：

 < script type =text / x-handlebarsid =entries> 
 {{#each controller itemController =entryItem}} 
 {{#linkToentrythis}} {{name}} {{/ linkTo}}< br /> 
 {{#if isSelected}} 
 {{details}}< br />< br /> 
 {{/ if}} 
 {{/ each}} 
  

/ p>

不需要做的是创建 App.EntryItem 控制器，并添加一个计算属性 isSelected 如果当前路线模型=== model

像这样：

  App.EntryItemController = Em.ObjectController.extend（{
需要：'entry'，
 
 isSelected：function（）{
 return this.get（'controllers.entry.model'）=== this.get（'model'）; 
} .property（' controller.entry.model'）
}）; 
  

以下是上述所有应用的小提琴：

http://jsfiddle.net/teddyzeenny/T2EyK/1/

I am iterating a list of entries and would like to display the content of each entry within the list, but only when on the respective entry's route.

i.e. - When on route /entries/2

* link to entry 1
* link to entry 2

  content for entry 2

* link to entry 3

Unfortunately, it seems I can't use {{outlet}} within the {{#each entry}} loop.

Initially I tried to set isActive to true within setupController on the route, and check for that within the template, but it does not seem like there is a good way to remove that flag when you navigate to /entries/3 (deactivate only works when moving away from /entries/:entry_id entirely) . See Is there an opposite of setupController? for more on this.

What is the best way to do this with Ember?

解决方案

You can use a an itemController with {{each}} and set a computed property on that item controller that makes sure the current model property is equal to the App.EntryRoute current model.

So you would have the following route setup:

App.Router.map(function() {
    this.resource('entries', { path: '/'}, function() {
      this.resource('entry', { path: ':entry_id' });
    });
});

The following template:

<script type="text/x-handlebars" id="entries">
  {{#each controller itemController="entryItem"}}
    {{#linkTo "entry" this}}{{name}}{{/linkTo}} <br />
    {{#if isSelected}}
      {{details}} <br /><br />
    {{/if}}
  {{/each}}

No what you need to do is create the App.EntryItem controller and add a computed property isSelected which should return true if current route model === model

something like this:

App.EntryItemController = Em.ObjectController.extend({
  needs: 'entry',

  isSelected: function() {
    return this.get('controllers.entry.model') === this.get('model');
  }.property('controllers.entry.model')
});

Here's a fiddle with all of the above applied:

http://jsfiddle.net/teddyzeenny/T2EyK/1/

这篇关于只有在模型的路线上，我如何才能在列表中呈现模型的模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！