EmberJS - Envolvendo o conteúdo em um componente

Você pode envolver o conteúdo em um componente usando os modelos. Considere que temos um componente chamado {{my-component}}, que pode ser embrulhado em componente passando propriedades para ele em outro template como mostrado abaixo -

{{my-component title = title action = "funcName"}}

Você pode compartilhar os dados do componente com seu conteúdo empacotado. Para mais informações, clique neste link .

Exemplo

O exemplo fornecido a seguir especifica como envolver o conteúdo em um componente. Crie um componente com o nome pós-ação , que será definido em app / components / .

Abra o arquivo post-action.js e adicione o seguinte código -

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      compFunc: function () {
         this.set('title', "Tutorialspoint...");
         //This method sends the specified action
         this.sendAction();
      }
   }
});

Agora abra o arquivo de modelo de componente post-action.hbs com o seguinte código -

<input type = "button" value = "Click me" {{action "compFunc"}} /><br/>
//wrapping the 'title' property value
<p><b>Title:</b> {{title}}</p>
{{yield}}

Abra o arquivo index.hbs e adicione o seguinte código -

<b>Click the button to check title property value</b>
{{post-action title = title action = "compFunc"}}
{{outlet}}

Resultado

Execute o servidor ember; você receberá a seguinte saída -

Ao clicar no botão, a função compFunc () será acionada e exibirá a seguinte saída -