Passando propriedades para um componente

O componente não acessa a propriedade diretamente no escopo do modelo. Portanto, basta declarar a propriedade no momento da desaceleração do componente (ex: {{título do nome do componente = título}}). A propriedade do título no escopo externo do template está disponível dentro do template do componente.

Sintaxe

{{post-action title=title}}

No código acima, o componente 'pós-ação' tem a propriedade 'título' e inicializado com o mesmo nome da propriedade ('título').

Exemplo

O exemplo fornecido abaixo descreve como passar propriedades para um componente. Crie uma rota com o nome como pós-ação e abra o arquivo router.js para definir os mapeamentos de URL -

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('post-action');
});

//It specifies Router variable available to other parts of the app
export default Router;

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

<p>Enter your data: {{input type = "text" value = title}}</p>
<p>The details of the object passed are : {{title}}</p>
{{yield}}

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

{{post-action title=title}}
{{outlet}}

Abra o arquivo post-action.js criado em app / routes / com o seguinte código -

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function() {
      //assigning the default value for 'title' property
      return {
         title: ""
      };
   }
});

Resultado

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