Question

我在Ember.js中有非常庞大的表格。此刻我正在使用这个工作单控制器，但它打破了单一责任原则。

<table>
 <thead>
   <tr>
     <th>First column in first group</th>
     <th>Second column in first group</th>

     <th>First column in second group</th>
     <th>Second column in second group</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>{{controller.someAction}}</td>
     <td>{{controller.otherAction}}</td>

     <td>{{controller.someAction2}}</td>
     <td>{{controller.otherAction2}}</td>
   </tr>
 </tbody>
</table>

相反，我想在一个控制器中将相关操作的对象分组。

<table>
 <thead>
   <tr>
     <th>First column in first group</th>
     <th>Second column in first group</th>

     <th>First column in second group</th>
     <th>Second column in second group</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     {{render 'firstGroup' this}}
     {{render 'secondGroup' this}}
   </tr>
 </tbody>
</table>

然而，它不会起作用。 Ember会将firstGroup放在某种标记中（例如div），这些标记不能直接位于<tr>和<td>之下。我不能同时使用<tr>和<td>来渲染容器。

如果ember可以在没有容器标签的情况下渲染控制器，那将会很棒。有什么方法可以解决这个问题吗？也许HTML中有特殊的标签，不会破坏我的桌面布局，可以放在那个位置？我的控制器中的“动作”仅根据模型计算值。也许我应该使用控制器以外的东西吗？

Answer 1

是和否。

您可以定义要用于特定视图的标记，但遗憾的是，使用渲染来托管多个列很困难。因此，您可能需要使用渲染将其分解为单个TD。

<tr>
  {{render 'firstGroup' this}}
  {{render 'secondGroup' this}}
  {{render 'thirdGroup' this}}
  {{render 'fourthGroup' this}}
</tr>

App.FirstGroupView = Em.View.extend({
  tagName:'td'
});

http://emberjs.jsbin.com/jafanitu/1/edit

话虽如此，我可能会在渲染时将其分解为行级别，然后在列级使用部分

<tbody>
  {{render 'row' this}}
</tbody>


<script type="text/x-handlebars" data-template-name="row">
  {{partial 'first_group'}}
  {{partial 'second_group'}}
  {{partial 'third_group'}}
  {{partial 'fourth_group'}}
</script>

<script type="text/x-handlebars" data-template-name="_first_group">
  <td>
    hello world
  </td>
</script>

http://emberjs.jsbin.com/jafanitu/2/edit

然后创建mixins来处理每个group的逻辑并将这些mixin添加到控制器中，以保持控制器清洁。 http://emberjs.com/api/classes/Ember.Mixin.html

Answer 2

您可以将参数传递给{{render}}助手呈现的视图：

{{render "myView" someViewProperty="foo" anotherViewProperty=4}}

因此，您可以设置视图的tagName，以便获得正确的HTML结构：

<table>
 <thead>
   <tr>
     <th>First column in first group</th>
     <th>Second column in first group</th>

     <th>First column in second group</th>
     <th>Second column in second group</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     {{render 'firstGroup' this tagName="td"}}
     {{render 'secondGroup' this tagName="td"}}
   </tr>
 </tbody>
</table>

如何在表中呈现没有容器标签的控制器？

2 个答案: