EmberJS - Avvolgere il contenuto in un componente

Puoi racchiudere il contenuto in un componente utilizzando i modelli. Considera di avere un componente chiamato {{my-component}}, che può essere avvolto in un componente passandogli le proprietà in un altro modello come mostrato di seguito -

{{my-component title = title action = "funcName"}}

È possibile condividere i dati del componente con il relativo contenuto avvolto. Per ulteriori informazioni, fare clic su questo collegamento .

Esempio

L'esempio fornito di seguito specifica come avvolgere il contenuto in un componente. 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"}} /><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; riceverai il seguente output -

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