EmberJS：#each 循环中的多个出口

【问题标题】：EmberJS: multiple outlets within #each loopEmberJS：#each 循环中的多个出口
【发布时间】：2015-03-23 09:51:24
【问题描述】：

我想完成以下功能：

条目列表 - 单击单个条目时，该条目的详细信息应显示在当前条目下方。

应该可以通过路由访问单个条目，例如tasks/1

我的做法：

我试图通过在我的#each 循环中包含{{outlet}} 来解决这个问题，但这并不奏效。

我找到的所有教程和解决方案都基于List -> Details 方法，其中仅使用一个插座。

我不知道如何解决这个问题。有没有更好的解决方案？

【问题讨论】：

标签： ember.js each outlet

【解决方案1】：

这是通过路由无法实现的。您最好使用在单击时展开、加载和显示详细信息的组件。

//list.hbs
{{#each task in tasks}}
  {{#task-loader task=task}}
    {{#task-loader-trigger}}
      //list ui
    {{/task-loader-trigger}}
    {{#task-loader-content}}
      //details ui
    {{/task-loader-content}}
  {{/task-loader}}
{{/each}}

//task-loader.js
export default Em.Component.extend({
  isOpen: false
});

//task-loader-trigger.js
export default Em.Component.extend({
  click: function() {
    //toggle isOpen
  }
}};

//task-loader-content.js
export default Em.Component.extend({
  classNameBindings: ['parentView.isOpen:show:hide'],
  didInsertElement: function() {
    //send request and load data
  } 
});

如果您确实想维护状态（当前打开的任务），请使用查询参数。希望这会有所帮助:)

【讨论】：

感谢您的回答。我遵循了您的方法，但最终使用模式对话框来显示任务的详细信息。