javascript - 在 Ember.js 中实现 Accordion 式 View

Question

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

我考虑过让 postRoute 重用 postsRou​​te 并设置一个标志，然后在 handlebars 模板中检查该标志以显示其余的帖子内容.

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

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用于工作演示。