Javascript Ember.js-带有URL的手风琴式主细节

我正在寻找“余烬之路”来实现某种特定的主细节场景

基本上，我想实现类似手风琴的东西，其中标题是可点击的，并显示有关特定项目的更多信息

{{#each item in items}}
 <li>
    {{#link-to "item" item}}
        <h3>{{item.name}}</h3>
        <p>{{item.url}}</p>
    {{/link-to}}

    {{ what to use here instead of outlet }}
</li>
{{/each}}

{{{#项目中的每个项目}

{{{#链接到“项目”项目}
{{item.name}
{{item.url}

{{/链接到}
{{在这里使用什么代替插座}

{{/每个}}

每个项目都应该有URL，所以我认为使用视图来显示细节是不可能的

在每个辅助对象内使用插座是不可能的

我想这样做的一种方法是跟踪控制器中折叠和打开的项目，但这似乎不是很优雅

另一个想法是使用一个插座，并使用didInsertElement和一些DOM操作，以便将其移动到正确的

——但这仍然远远不够理想

---

如果您有任何帮助，我们将不胜感激。

听起来您可能想使用

render

。这是一个JSBin，显示了Ember中非常粗糙的手风琴类型特性

模板：

  <script type="text/x-handlebars" data-template-name="index">
    <h2>Index Content:</h2>
    <ul>
      {{#each itemController='person'}}
        <li>
          <span {{action toggleActive}}>{{firstName}} {{lastName}}</span>
          {{#if active}}
            {{render 'person' this}}
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </script>
  <script type="text/x-handlebars" data-template-name="person">
    <hr/>
      Details about {{firstName}} {{lastName}} could go here.
    <hr/>
  </script>

项目控制员：

App.PersonController = Ember.ObjectController.extend({
  actions : {
    toggleActive : function(){
      this.set('active', !this.get('active'));
    }
  }
});

---

您不需要对所有路由使用

{{outlet}}

。您可以定义仅用于设置控制器的路由

您需要将

App.PersonRoute

定义为accordion路线中的嵌套路线。
使用App.PersonRoute的

setupController

用当前人员更新手风琴的控制器

例如，假设具有手风琴的模板是

应用程序

模板。定义名为“person”的子路由：

App.Router.map(function() {
  this.route('person', { path: ':person_id' });
});


App.PersonRoute = Ember.Route.extend({  
  setupController: function(controller, model) {
    this.controllerFor('application').set('selected', model);
    this._super.apply(this, arguments);
  }
});

然后，您可以使用项目控制器检查是否选择了当前人员：

{{#each itemController='personItem'}}
  {{#linkTo "person" this}}{{name}}{{/linkTo}}
  {{#if isSelected}} 
     {{partial "person"}} {{! or whatever you wish to do }}
  {{/if}}
{{/each}}

使用项目控制器：

App.PersonItemController = Ember.ObjectController.extend({
  needs: 'application',
  isSelected: function() {
    return this.get('model') === this.get('controllers.application.selected');
  }.property('controllers.application.selected', 'model')
});

---

使用jsbin:

这种方法，我使用视图实现了类似的功能。但问题是——理想情况下，我希望每个项目都有一个URL。

App.PersonItemController = Ember.ObjectController.extend({
  needs: 'application',
  isSelected: function() {
    return this.get('model') === this.get('controllers.application.selected');
  }.property('controllers.application.selected', 'model')
});