Ember.js 带有EmberJS视图的可扩展表行

我是Ember的新手，试图通过网上的教程和文档进行学习

我正试图了解自定义余烬视图以及何时使用它们

我有一个测试用例，其中我在一个表中列出了许多产品。单击特定产品后，我希望在当前所选产品的正下方显示一个隐藏行或div，并可能对web服务进行Ajax调用，以检索有关该产品的更多信息。在这个打开的div或row中，我可能需要编辑字段等。我应该为此使用余烬视图吗？何时触发行等的单击事件？您将在哪个控制器中处理服务返回的所有必要事件和额外产品信息等

我用基本设置创建了一个JS FIDLE，但没有单击事件。有没有人做过类似的事情，我可以看一看，或者可以提供帮助

这只是列出产品的基本表结构，显示我希望可以单击的行：

<table class="table table-bordered">
      <thead>
          <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Description</th>
          </tr>
      </thead>
      <tbody>
          {{#each}}
              <tr>
                  <td>{{id}}</td>
                  <td>{{title}}</td>
                  <td>{{description}}</td>                    
              </tr>
           {{/each}}
      </tbody>

    </table> 

身份证件
标题
描述
{{{#各}
{{id}
{{title}}
{{description}}
{{/每个}}

谢谢

这是我不久前遇到的一个结构问题。我开发了以下方法。让我们从定义一些必要的控制器开始

App.ProductsController = Ember.ArrayController.extend({
    itemController: 'product'
});

App.ProductController = Ember.ObjectController.extend({
    displayDetails: false,

    actions: {
        toggleDetails: function() {
            this.toggleProperty('displayDetails');
            return;
        }
    }
});

以及相应的观点

{{#each}}
    <tr {{action 'toggleDetails'}}>
        <td>{{id}}</td>
        <td>{{title}}</td>
        <td>{{description}}</td>                    
    </tr>
    {{#if displayDetails}}
      <tr>
          <td colspan="3">details here to {{id}}</td>
      </tr>
    {{/if}}
 {{/each}}

正如你所看到的，你应该会得到想要的效果

利弊 单击后，您不会更改URL的状态，也不会获得ProductRoute。 通过使用模型之间具有异步关系的余烬数据，可以异步使用静态加载数据。我不确定在MVC框架中这样做是否有好处。相信我，随着时间的推移，事情会变得一团糟

结论 我不知道目前是否有更好的方法，但您应该考虑一下您的UX模式。也许在侧边栏中呈现子结果或将用户重定向到其他页面会更好

{{#if displayDetails}}
  {{render 'productDetails'}}
{{/if}}