在 Ember.js 中实现手风琴式视图

【问题标题】：Implementing an accordian-type view in Ember.js在 Ember.js 中实现手风琴式视图
【发布时间】：2014-03-23 18:12:11
【问题描述】：

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

我考虑过让postRoute 重复使用postsRoute 并设置一个标志，然后在车把模板中对其进行检查以吐出其余的帖子内容。

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

【问题讨论】：

标签： javascript ember.js conventions

【解决方案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 以获得工作演示。

【讨论】：