Meteor - Blaze
Blaze è un pacchetto Meteor per la creazione di modelli reattivi dal vivo.
Metodo di rendering
Questo metodo viene utilizzato per il rendering dei modelli nel DOM. Innanzitutto, creeremomyNewTemplateche sarà reso. Aggiungeremo anchemyContainer, che verrà utilizzato come elemento genitore, quindi il render metodo sa dove visualizzare il nostro modello.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>Successivamente, creeremo una funzione di rendering che richiederà due argomenti. Il primo è un modello che verrà renderizzato e il secondo è un elemento genitore che abbiamo menzionato sopra.
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
Blaze.render(myNewTemplate, myContainer);
}
});
Rendering con dati
Se hai bisogno di trasmettere alcuni dati in modo reattivo, puoi usare renderWithDatametodo. L'HTML sarà esattamente lo stesso dell'esempio precedente.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>Possiamo aggiungere i nostri dati come secondo argomento in Meteor.renderWithDatametodo. Gli altri due argomenti sono gli stessi dell'esempio precedente. In questo esempio, i nostri dati sono una funzione che registrerà del testo.
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myData = function() {
console.log('Log from the data object...')
}
var myContainer = document.getElementById('myContainer');
Blaze.renderWithData(myNewTemplate, myData, myContainer);
}
});
Rimuovi metodo
Possiamo aggiungere remove metodo.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div id = "myContainer">
</div>
</body>
<template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>In questo esempio, stiamo eseguendo il rendering del modello che verrà rimosso dopo tre secondi. Notare ilBlaze.Remove metodo che stiamo utilizzando per rimuovere il modello.
meteorApp.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);
Meteor.setTimeout(function() {
Blaze.remove(myRenderedTemplate);
}, 3000);
}
});La tabella seguente mostra gli altri metodi che possono essere utilizzati.
| Sr.No. | Metodo e dettagli |
|---|---|
| 1 | Blaze.getData([elementOrView]) Utilizzato per recuperare i dati dall'elemento di rendering. |
| 2 | Blaze.toHTML(templateOrView) Utilizzato per il rendering di modelli o viste sulla stringa. |
| 3 | Blaze.toHTMLWithData(templateOrView, data) Utilizzato per il rendering di modelli o viste sulla stringa con dati aggiuntivi. |
| 4 | new Blaze.View([name], renderFunction) Utilizzato per creare una nuova parte reattiva Blaze del DOM. |
| 5 | Blaze.currentView Utilizzato per ottenere la visualizzazione corrente. |
| 6 | Blaze.getView([element]) Utilizzato per ottenere la visualizzazione corrente. |
| 7 | Blaze.With(data, contentFunc) Utilizzato per costruire una vista che esegue il rendering di alcuni contenuti con il contesto. |
| 8 | Blaze.If(conditionFunc, contentFunc, [elseFunc]) Utilizzato per costruire una vista che esegue il rendering di alcuni contenuti condizionali. |
| 9 | Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) Utilizzato per costruire una vista che restituisce alcuni contenuti condizionali (invertiti Blaze.if). |
| 10 | Blaze.Each(argFunc, contentFunc, [elseFunc]) Utilizzato per costruire una vista che esegue il rendering contentFunct per ogni articolo. |
| 11 | new Blaze.Template([viewName], renderFunction) Utilizzato per costruire una nuova visualizzazione Blaze con nome e contenuto. |
| 12 | Blaze.isTemplate(value) Utilizzato per restituire true, se il valore è un oggetto modello. |