ember.js - 带有 EmberJS View 的可扩展表格行

Question

我是 Ember 的新手，正在尝试按照我可以在网上找到的教程和文档进行学习。

我正在努力思考自定义 Ember View 以及何时使用它们。

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

我已经使用基本设置创建了一个 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> 

谢谢

Answer 1

概念

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

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

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

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

和相应的 View

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

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

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

如您所见there，您应该会得到想要的效果

优缺点

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

结论

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