在Ember.js中实现一个手风琴型视图

Question

在一个玩具应用程序中，我有一个显示所有帖子标题的'帖子'模板。当您点击每个标题时，而不是转到“显示”视图，我想直接内联展开该帖子的其余内容。

我考虑让postRoute重用postsRoute并设置一个标志，然后在把手模板中检查标志以便将其他内容放出。

什么是首选的'Ember-ish'方法，它可以让资源的单一视图在正确的位置与其索引视图内联呈现？

Answer 1

我会建议在PostsController上定义一个itemController，它可以对单个发布对象采取行动。 然后，在您的模板中定义切换itemController上的属性的操作（例如toggleBody）。你可以使用这个属性来显示或隐藏每个帖子的正文：

App.PostsController = Ember.ArrayController.extend 
    itemController: 'post' 

App.PostController = Ember.ObjectController.extend 
    showBody: no 
    actions: 
    toggleBody: -> 
     @toggleProperty('showBody') 
     return false 

<script type="text/x-handlebars" data-template-name="posts"> 
<ul> 
    {{#each}} 
    <li>{{title}} <span {{action toggleBody}} class='label'>Toggle</span> 
    {{#if showBody}}   
     <div>{{body}}</div> 
    {{/if}} 
    </li> 
    {{/each}} 
</ul> 
</script> 

也this jsFiddle见的工作演示。