🥇 Componentes com marcação estruturada em ember.js v1.10

A adição de parâmetros de bloco ao ember.js v1.10 significa que agora você pode passar parâmetros ao entregar um componente a um bloco. Isso abre a porta para a colocação de várias partes de conteúdo em marcação estruturada definida no modelo do componente … onde ele pertence.

Digamos que você queira uma estrutura simples de cabeçalho / corpo / rodapé, como:

<div>
  <header>My header</header>
  <div class="body">My body</div>
  <footer>My footer</footer>
</div>

Anteriormente, você poderia compor três subcomponentes com o componente de nível superior:

{{#my-comp}}
  {{#my-comp-header}}My header{{/my-comp-header}}
  {{#my-comp-body}}My body{{/my-comp-body}}
  {{#my-comp-footer}}My footer{{/my-comp-footer}}
{{/my-comp}}

E os três modelos correspondentes (e talvez até um quarto se você tiver estrutura no nível superior, que vou deixar de fora).

<header>{{yield}}</header>

<footer>{{yield}}</footer>

<div class="body">{{yield}}</div>

Desta vez, vamos usar um modelo de nível superior como este:

<header>{{yield header}}</header>
<div class="body">{{yield body}}</div>
<footer>{{yield footer}}</footer>

Com um pouco de mágica na definição do componente:

App.MyCompComponent = Ember.Component.extend({
  // homework: meta-programmed version
  header: {isHeader: true},
  footer: {isFooter: true},
  body:   {isBody: true}
});

E agora podemos instanciar o componente e definir suas seções usando if / else:

{{#my-comp as |section|}}
  {{#if section.isHeader}}
    My header
  {{else if section.isBody}}
    My body
  {{else if section.isFooter}}
    My footer
  {{/if}}
{{/my-comp}}

E é isso!

Ainda estou para investigar se a marcação condicional de vários rendimentos deixa quaisquer redundâncias, mas em qualquer caso, ela está razoavelmente contida. Esperançosamente, é, ou pode ser otimizado pela estrutura.

JSBin: http://jsbin.com/ketahe/1

Related Posts