Пользовательские компоненты с несколькими разделами с урожаем

Я пытаюсь создать компонент 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, например. через помощники руля? Если да, то как?

Ответы

Ответ 1

Один из способов решения этой проблемы - использовать несколько помощников рулей для каждого из "подкомпонентов", которые вы хотите.

Итак, вот как я буду структурировать приложение:

  • В вашем каталоге приложений/компонентов добавьте файл data-table.js
  • В каталоге приложений/шаблонов/компонентов добавьте файл data-table.hbs
  • В вашем каталоге приложений/помощников добавьте файл для пользовательских представлений, называемых 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
});

Это должно сработать для вас!