Pasar propiedades a un componente

El componente no accede a la propiedad directamente en el ámbito de la plantilla. Por lo tanto, simplemente declare la propiedad en el momento de la desaceleración del componente (por ejemplo: {{nombre del componente título = título}}). La propiedad del título en el ámbito de la plantilla exterior está disponible dentro de la plantilla del componente.

Sintaxis

{{post-action title=title}}

En el código anterior, el componente 'post-acción' tiene la propiedad 'título' y se inicializa con el mismo nombre que el nombre de la propiedad ('título').

Ejemplo

El ejemplo que se muestra a continuación describe cómo pasar propiedades a un componente. Cree una ruta con el nombre como acción posterior y abra el archivo router.js para definir las asignaciones 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;

Ahora abra el archivo de plantilla de componente post-action.hbs con el siguiente código:

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

Abra el archivo index.hbs y agregue el siguiente código:

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

Abra el archivo post-action.js creado en app / routes / con el siguiente código:

import Ember from 'ember';

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

Salida

Ejecute el servidor ember; recibirá el siguiente resultado: