Passer des propriétés à un composant

Le composant n'accède pas directement à la propriété dans la portée du modèle. Par conséquent, déclarez simplement la propriété au moment de la décélération du composant (ex: {{component-name title = title}}). La propriété title dans la portée du modèle externe est disponible dans le modèle du composant.

Syntaxe

{{post-action title=title}}

Dans le code ci-dessus, le composant 'post-action' a la propriété 'title' et initialisé avec le même nom que le nom de la propriété ('title').

Exemple

L'exemple ci-dessous décrit comment passer des propriétés à un composant: créer une route avec le nom comme post-action et ouvrir le fichier router.js pour définir les mappages d'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;

Ouvrez maintenant le fichier de modèle de composant post-action.hbs avec le code suivant -

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

Ouvrez le fichier index.hbs et ajoutez le code suivant -

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

Ouvrez le fichier fichier post-action.js créé sous app / routes / avec le code suivant -

import Ember from 'ember';

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

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -