0

我正在寻找“The 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 以便将其移动到正确的 <li> 内——但这又远非理想。

任何帮助，将不胜感激。

4

2 回答 2

2

您不需要{{outlet}}对所有路线都使用 an 。您可以定义一个路由来设置控制器。

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

例如，假设具有手风琴的模板是application模板。定义一个名为 `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：http: //jsbin.com/ucanam/1587/edit

于 2013-10-23T09:05:10.503 回答
0

听起来您可能想使用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'));
    }
  }
});
于 2013-10-04T20:05:02.860 回答