在Ember.js中实现一个折叠式视图

Question

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

我已考虑让postRoute重复使用postsRoute并设置一个标记，然后在把手模板中对其进行检查，以展示其余的帖子内容。

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

Answer 1

我建议在itemController上定义一个PostsController，它可以对各个帖子对象采取措施。 然后，在您的模板中定义切换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了解工作演示。