只有在模型的路線上時，我如何才能在列表中渲染模型的模板？

我正在迭代一個entries的列表，並希望顯示列表中每個條目的內容，但僅限於各條目的路由。只有在模型的路線上時，我如何才能在列表中渲染模型的模板？

即 - 當路線/entries/2

* link to entry 1 
* link to entry 2 

    content for entry 2 

* link to entry 3

遺憾的是，似乎我不能{{#each entry}}循環中使用{{outlet}}。

起初，我試圖在路線上內setupController設置isActive爲真，並在模板中檢查這一點，但它似乎並不像有是當你瀏覽到/entries/3（deactivate僅適用於去除標誌的好方法當完全離開/entries/:entry_id時）。有關詳情，請參閱Is there an opposite of setupController?。

Ember的最佳做法是什麼？

來源

2013-05-12 jsteiner

您是否嘗試過使用'{{#each}}'而不是{{outlet}}內的{{partial}}幫手來幫助您工作？ – intuitivepixel 2013-05-12 15:06:10

我猜這個技巧只是在'entry'處於活動狀態時渲染局部。 – jsteiner 2013-05-12 15:29:17

您可以使用一個itemController與{{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如果當前路線模型應該返回true === model

是這樣的：

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-12 16:40:16

我實現以下面的方式解決。請讓我知道我的代碼中的任何短命。我正在設置一個屬性爲Entry模型，當調用輸入路徑使其可見時。

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-01 16:50:36 seenivasan

只有在模型的路線上時，我如何才能在列表中渲染模型的模板？

回答

相關問題