Question

我正在寻找'Ember Way'来实现一个特定的主要细节场景。

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

{{#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}}

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

AFAIK无法使用每个助手内的插座。

我认为一种方法是跟踪控制器中折叠和打开的项目，但这看起来不太优雅。

另一个想法是拥有一个插座并使用带有一些DOM操作的didInsertElement，以便将其移入正确的＆lt; li> - 但这又远非理想。

任何帮助都将不胜感激。

Answer 1

您不需要为所有路线使用{{outlet}}。您可以仅为设置控制器定义路径。

您需要将App.PersonRoute定义为手风琴路线内的嵌套路线使用App.PersonRoute的{{1}}更新当前人员的手风琴控制器。

例如，我们假设具有手风琴的模板是setupController模板。定义一个名为“person”的子路由：

application

然后您可以使用项目控制器来检查当前人员是否被选中：

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}}

工作jsbin：http://jsbin.com/ucanam/1587/edit

Answer 2

听起来您可能想要使用render。这是一个JSBin，展示了Ember中非常粗糙的手风琴类型特征。

http://jsbin.com/ucanam/1313/edit

模板：

  <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.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
        {firstName: 'Kris', lastName: 'Selden', active:false},
        {firstName: 'Luke', lastName: 'Melia', active:false},
        {firstName: 'Formerly Alex', lastName: 'Matchneer', active:false}
      ];
  }
});

项目控制器：

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

Ember.js - 带URL的手风琴式主人详细信息

2 个答案: