Passaggio di proprietà a un componente

Il componente non accede alla proprietà direttamente nell'ambito del modello. Pertanto, è sufficiente dichiarare la proprietà al momento della decelerazione del componente (es: {{nome-componente titolo = titolo}}). La proprietà del titolo nell'ambito del modello esterno è disponibile all'interno del modello del componente.

Sintassi

{{post-action title=title}}

Nel codice precedente, il componente "post-azione" ha la proprietà "title" e inizializzato con lo stesso nome del nome della proprietà ("titolo").

Esempio

L'esempio riportato di seguito descrive come passare le proprietà a un componente.Crea una rotta con il nome come post-azione e apri il file router.js per definire le mappature 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;

Ora apri il file modello del componente post-action.hbs con il codice seguente:

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

Apri il file index.hbs e aggiungi il codice seguente:

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

Apri il file post-action.js creato in app / routes / con il seguente codice:

import Ember from 'ember';

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

Produzione

Esegui il server ember; riceverai il seguente output -