带有 EmberJS 视图的可扩展表格行答案

【问题标题】：Expandable table row with EmberJS view带有 EmberJS 视图的可扩展表格行
【发布时间】：2014-11-25 12:04:43
【问题描述】：

我是 Ember 的新手，并尝试通过我在网上找到的教程和文档来学习。

我正试图围绕自定义 Ember 视图以及何时使用它们。

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

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

http://jsfiddle.net/jc79aoap/1/

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

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

谢谢

【问题讨论】：

标签： ember.js

【解决方案1】：

构想

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

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

您当然可以将条件内的逻辑移动到另一个控制器

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

你应该得到你想要的效果，你可以看到there

优点和缺点

点击后不会改变 URL 的状态，也不会得到 ProductRoute。您可以通过使用模型之间具有异步关系的 ember 数据来异步加载数据。我不太确定在 MVC 框架中以这种方式做事是否好。相信我，随着时间的推移，它会变得一团糟。

结论

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

【讨论】：