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中实现这样的结构，例如通过车把帮手？如果是这样的话？

Answer 1

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

所以这就是我构建应用程序的方式：

在您的app / components目录中添加data-table.js文件
在app / templates / components目录中添加data-table.hbs文件
在app / helpers目录中，为自定义视图添加名为custom_views.js

无论您何时调用组件，都可以传递参数，这些参数可能来自您的模型/控制器，类似于以下内容：

{{ 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
});

这对你有用！

自定义组件具有多个类似于产量的部分

1 个答案: