EmberJS - Compartilhando dados de componentes com conteúdo agrupado

Descrição

Você pode compartilhar os dados do componente com seu conteúdo empacotado. Considere que temos um componente chamado {{meu-componente}} para o qual podemos fornecer a propriedade de estilo para escrever a postagem. Você pode escrever como -

{{#my-component editStyle="markdown-style"}}

O componente é fornecido com o hash e fornecido com o modelo. O editStyle pode ser usado como um argumento para o auxiliar do componente.

Exemplo

O exemplo a seguir especifica o compartilhamento dos dados do componente com seu conteúdo empacotado. 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 código abaixo -

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 código abaixo -

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

Abra o arquivo index.hbs e adicione o código abaixo:

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

Resultado

Execute o servidor ember e você obterá o resultado abaixo -

Quando você clica no botão, a função compFunc () é acionada e exibe a saída abaixo -