Question

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

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

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

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

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

观

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

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

，你会得到理想的效果

利弊

点击后，您无法更改网址状态，但您无法获得ProductRoute。通过使用模型之间具有异步关系的ember数据，可以异步使用静态加载数据。我不太确定在MVC框架中以这种方式做事是否合适。相信我，随着时间的推移，它会变得非常混乱。

结论

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

带有EmberJS视图的可扩展表行

1 个答案:

观

利弊

结论