ember.js - 具有多个类似产量部分的自定义组件

Question

我正在尝试创建一个包含多个内容部分的 ember.js 组件。表达愿望的直观方法是使用语义子组件，这些子组件稍后将在适当的位置呈现，例如

{{data-table …}}
  {{column name="Name" … }}}
    item.name
  {{/column}}
  ...
{{/data-table}}

将转变为

<table …>
  <thead>
    <th>Name</th>
    ...
  </thead>
  <tbody>
    <tr>
      <td>First item name</td>
      …
    </tr>
    ...
  </tbody>
</table>

是否可以在handlebars.js或ember.js中实现这样的构造，例如通过 Handlebars 助手？如果是的话，怎么样？

Answer 1

解决此问题的一种方法是为您想要的每个“子组件”使用多个 Handlebars 助手。

这是我构建应用程序的方式:

• 在您的 app/components 目录中添加 data-table.js 文件
• 在您的 app/templates/components 目录中添加 data-table.hbs 文件
• 在您的 app/helpers 目录中添加一个名为 custom_views.js 的自定义 View 文件

无论您在何处调用组件，都可以向其传递参数，这些参数可能来自您的模型/ Controller ，大致如下:

{{ data-table items=itemsArrayFromController }}

现在变量 itemsArrayFromController 将可用于您的组件范围(即在 data-table.js 文件和 data-table.hbs 文件中)

在 data-table.js 文件中，您还可以指定组件有权访问的其他变量，因此您可能需要执行以下操作:

App.DataTableComponent = Ember.Component.extend({
  headers: ['Name', 'Some other Property']
});

然后在 data-table.hbs 文件中，您可以渲染组件的 html 并使用助手来渲染组件的特定部分:

<table>
{{ dataTableHeaderHelper headers }}
  <tbody>
  {{#each itemsArrayFromController }}
    {{ dataTableRowsHelper item }}
  {{/each }}
  </tbody>
</table>

因此，我们在这里使用 dataTableHeaderHelper 来渲染表头，然后循环遍历 items 数组中的每个项目并为其渲染一行。

然后从您的帮助程序中生成实际的表。因此，在您的 custom_views.js 文件夹中，您可以执行以下操作:

// Returns the html for a table header
Ember.Handlebars.helper('dataTableHeaderHelper' function(headers) {
  var html = "<thead><tr>";
  for (var i = 0; i < headers.length; i++) {
    html += "<th>" + Handlebars.Utils.escapeExpression(header[i]) + "</th>";
  }
  var html += "</tr></thead>";
  return new Handlebars.Safestring(html);
}); 

// Returns the HTML for a table row
Ember.Handlebars.helper('dataTableRowsHelper' function(rows) {
  // Okay I think you get the hang of it, loop through each row
  // and then for each item generate the table row HTML
});

这应该适合你!