Question

我想在点击时扩展我的行。类似的效果发生here。问题是，在新的把手1.8上使用tr时，我在tr内获得了each。

{{#each positions itemController='position' itemView='url'}}
    <td>{{position}}

    {{#if showExpanded}}
         {{render 'positionDetails' this}}
    {{/if}}
{{/each}}

App.UrlView = Ember.View.extend
    tagName: 'tr'

App.PositionDetailsView = Ember.View.extend
    tagName: 'tr'

结果：

<tr class="ember-view" id="ember7755">
   <td>1</td>
   <tr class="position-details-view">
</tr>

我怎样才能使它有效？我已经设法只创建消费功能

了

App.PositionDetailsView = Ember.View.extend
    tagName: 'tr'
    classNames: 'expanded'

    didInsertElement: (->
        parent = @.$().parent()

        @.$().show().detach().insertAfter(parent)

Answer 1

使用现有代码，您将始终将一个tr嵌套在另一个中，因为itemView的{{1}}具有each，而positionDetailsView嵌套在其中还将tagName: 'tr'设置为＆＃39; tr＆＃39;。

对于您想要的结果，您需要一个（非tr）项目视图，其中包含 {/ 1}}元素的。但是因为它是一个表格，所以Ember视图的默认tagName元素不起作用。幸运的是，我们可以将行嵌套在<tr>和（更重要的）we can have multiple tbody elements in the same table中。

这会引导我们：

div

这假设您希望将tbody保留为{{#each positions itemController='position' itemView='url'}} <tr> <td>{{position}}</td> </tr> {{#if showExpanded}} {{render 'positionDetails' this}} {{/if}} {{/each}} App.UrlView = Ember.View.extend tagName: 'tbody' App.PositionDetailsView = Ember.View.extend tagName: 'tr'的单个元素的整个部分。如果没有，您可以保留旧版UrlView，将单独的视图定义为positions，并使用UrlView而不是tbody将位置td包裹在上方

无论如何，我不建议在使用Ember视图时手动操作DOM，如编辑问题所示。但是，对于这些更改，不再需要该代码。

如何在Ember 1.8中扩展表行？

1 个答案: