EmberJS - Condivisione dei dati dei componenti con contenuto avvolto

Descrizione

È possibile condividere i dati del componente con il relativo contenuto avvolto. Considera di avere un componente chiamato {{my-component}} per il quale possiamo fornire la proprietà di stile per scrivere il post. Puoi scrivere come -

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

Il componente viene fornito con l'hash e fornito al modello. Il editStyle può essere utilizzato come argomento per l'helper del componente.

Esempio

L'esempio seguente specifica la condivisione dei dati del componente con il relativo contenuto. Crea un componente con il nome post-action che verrà definito in app / components / .

Apri il file post-action.js e aggiungi il codice seguente:

import Ember from 'ember';

export default Ember.Component.extend({
   actions: {
      compFunc: function () {
         this.set('title', "Tutorialspoint...");
         //this method sends the specified action
         this.sendAction();
      }
   }
});

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

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

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

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

Produzione

Esegui il server ember e otterrai l'output seguente:

Quando si fa clic sul pulsante, la funzione compFunc () verrà attivata e visualizzerà l'output seguente: