Как сопоставить свойства компонента с моделью?

Question

В моем приложении Ember я перебираю массив моделей и рендеринг компонента для каждой из них:

{{#each}}
  {{content-box provider=provider type=type author=author link=link createdDate=created_date media=media summary=summary text=text title=title thumbnails=thumbnails}}
{{else}}
  No results :(
{{/each}}

Как видите, в этом отображении много избыточности. Есть ли способ просто сопоставить все свойства сразу?

Должен ли я использовать вид? Я все еще не совсем понимаю, когда использовать представление против компонента. Я прочитал несколько статей об этом, и у меня сложилось впечатление, что я должен использовать компонент, когда я хочу повторное использование, которое кажется прямо здесь.

Answer 1

Все эти параметры можно легко передать как один объект внутри {{#each}} помощник. По вашему мнению шаблон:

{{#each}}
  {{content-box content=this}}
{{/each}}

И в шаблоне вашего компонента:

{{#with content}}
  Provider: {{provider}}
  Type: {{type}}
{{/with}}

Вот рабочий JSBin.

К вашему сведению, вы можете назвать свойство содержимого как угодно. {{with}} помощник не является обязательным, но означает, что вы сокращаете {{content.provider}} в {{provider}},

Answer 2

Невозможно передать все эти параметры с одним атрибутом. Наличие такого большого количества параметров на самом деле является неприятным запахом, переработайте и выньте из компонента все, что не является обязательным для его функционирования.

Скажем, у вас есть:

<script type="text/x-handlebars" data-template-name="components/my-component">
    label 1 {{attribute1}}
    label 2 {{attribute2}}
    label N {{attributeN}}
    <button {{action "gotClicked" some_id}}>Click Me!</button>
</script>

Как бы то ни было, вам придется передать несколько атрибутов компоненту, от 1 в N а также some_idименно то, что вы делаете.

Дело в том, что компоненты спроектированы, чтобы быть общими частями кода, которые могут быть подключены в нескольких местах. Имея это в виду, проведите рефакторинг и извлеките (вспомогательные) данные, которые предназначены только для чтения / просмотра пользователем.

Что-то вроде:

<script type="text/x-handlebars" data-template-name="some-view">
    {{#each}}
        label 1 {{attribute1}}
        label 2 {{attribute2}}
        label N {{attributeN}}
        {{my-component some_id=some_id}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="components/my-component">
    <button {{action "gotClicked" some_id}}>Click Me!</button>
</script>