2

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

即 - 在路线上时/entries/2

* link to entry 1
* link to entry 2

  content for entry 2

* link to entry 3

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

最初我尝试在路线上设置isActive为 true setupController，并在模板中检查它，但是当您导航到时，似乎没有一种很好的方法可以删除该标志/entries/3（deactivate仅在完全远离时才有效/entries/:entry_id）。请参阅是否有 setupController 的对立面？了解更多信息。

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

4

2 回答 2

4

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

因此，您将具有以下路线设置：

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

以下模板：

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

您不需要做的是创建App.EntryItem控制器并添加一个计算属性isSelected，如果当前路由模型 === 则该属性应返回 truemodel

像这样的东西：

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

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

这是一个所有上述应用的小提琴：

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

于 2013-05-12T16:40:16.427 回答
0

我通过以下方式实现了解决方案。请让我知道我的代码中的任何缺点。在调用入口路由以使其可见时，我正在为入口模型设置一个属性。

HTML：

<script type="text/x-handlebars" >
    {{outlet}}
</script>

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

JAVASCRIPT：

App = Ember.Application.create();

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

App.Entry = Em.Object.extend({
    id: null,
    name: null,
    details: null
});

App.entries =[
    App.Entry.create({
        id: 1,
        name: 'entry 1',
        details: 'details 1'
    }),
    App.Entry.create({
        id: 2,
        name: 'entry 2',
        details: 'details 2'
    }),
    App.Entry.create({
        id: 3,
        name: 'entry 3',
        details: 'details 3'
    })
];

App.EntriesRoute=Ember.Route.extend({

    model:function() {
        return App.entries;
    }
});

App.EntryRoute=Ember.Route.extend({

    model:function(params) { 
        var id=parseInt(params.entry_id);
        return App.entries.findProperty('id',id);
    },

    setupController:function(controller,model){
        App.entries.setEach('visi',false);
        model.set('visi',true);
    }
});

问候。

于 2013-06-01T16:50:36.890 回答