Uso Manubrio precompilati modelli parziali

Manubrio

Manubrio è un grande pezzo di software che ci permette di mantenere il frontend della nostra applicazione web separata dalla logica sottostante. Infatti, Manubrio è un motore di template logicless che raccoglie i nostri modelli al volo e serve la pagina web risultante fullfilled con i nostri dati. Ed è terribilmente facile impararlo e integrarlo in un progetto esistente! Se non conosci il manubrio o se vuoi conoscerlo meglio, si prega si riferisce al pagina ufficiale di documentazione.

Compilare o precompilare, Questa è la domanda…

In realtà, Non è una questione così difficile rispondere a: precompilare di sicuro! Precompilare i modelli è 2 advatanges significativi per noi:

1. siamo in grado di servire le nostre pagine web più velocemente a causa di un passo processo di template è già stato fatto e modelli sono pronti per essere utilizzati nel sito
2. possiamo usare handlebars.runtime.js invece di handlebars.js: una versione ridotta del manubrio con un ingombro ridotto, in modo più veloce per caricare

Così possiamo sicuramente preferiscono precompilare i nostri modelli, non è vero? Va bene, basta mettere tutti i modelli in una cartella che possiamo chiamare (So che non è originale) modelli. Il nostro albero di directory sarà qualcosa di simile:

radice di applicazione – .css – .js – modelli – template1.hbs – template1.hbs – template1.hbs – indice.html

Ora aprite un prompt dei comandi (o una finestra terminale) e passare alla radice di applicazione tipo di allora:

modelli manubrio/> js/modelli.js

Questo comando compilerà tutti i file che troverà all'interno della directory modelli e il risultato sarà il risultato nel file specificato (in questo esempio, nel file modelli.js tenere in .js elenco.

Ora avete solo per aggiungere la seguente riga all'interno del testa tag delle tue pagine HTML per visualizzare i modelli:

<script type ="text / javascript" src ="js/handlebars.runtime.min.js"></copione>
<script type ="text / javascript" src ="js/modelli.js"></copione>

Fantastico!

Ma, Se stai usando i partial, questo non è abbastanza. Permettetemi di ricordare qui quali sono i parziali a manubrio.

partial modelli

Una caratteristica meravigliosa di manubri è che si può utilizzare un modello in un altro modello: questo tipo di “sotto-template” è chiamato parziale. Ma mi permetta di spiegare il motivo per cui questa funzione può essere utile.

Riassumere, Stavo sviluppando una piccola applicazione mobile ibrida per gestire i miei clienti e volevo avere una pagina per aggiungere un nuovo cliente e un'altra pagina per modificare un cliente esistente. Questa pagina di modifica doveva:

• mostrare i dati per il client selezionato in un elenco formattato
• permettono di nascondere l'elenco e mostrare un form per modificare alcuni dati quando un tasto è scattato

Così avevo creato un modello per la Inserisci Pagina con la mia forma e un altro modello per il modificare pagina con la lista dei dati dei clienti. Ma in questa seconda pagina ho voluto avere la forma anche, e ho voluto usare lo stesso templñate avevo già scritto, evitando codice duplicato. Manubrio permette di ottenere questo utilizzando parziali. Mostriamo un esempio. Immaginate questo è il modello per la pagina di modifica:

edit_page.hbs

<h2>Cliente {{customer_name}}</h2>
<il>
    <in>{{indirizzo}}</in>
    <in>{{zip_code}}</in>
    <in>{{città}}</in>
    <in>{{stato}}</in>
    <in>{{nazione}}</in>
</il>
<ID pulsante="edit_customer">modificare</pulsante>

E supponiamo che possiate avere il modulo nella seguente schema:

customer_form.hbs

<modulo>
    <etichetta per="customer_name">Nome del cliente</etichetta>
    <tipo di input="testo" nome="customer_name" id ="customer_name" valore="{{customer_name}}" />
    <etichetta per="indirizzo">Indirizzo</etichetta>
    <tipo di input="testo" nome="indirizzo" id ="indirizzo" valore="{{indirizzo}}" />
    <etichetta per="zip_code">Zip_code</etichetta>
    <tipo di input="testo" nome="zip_code" id ="zip_code" valore="{{zip_code}}" />
    <etichetta per="stato">Stato</etichetta>
    <tipo di input="testo" nome="stato" id ="stato" valore="{{stato}}" />
    <etichetta per="nazione">Paese</etichetta>
    <tipo di input="testo" nome="nazione" id ="nazione" valore="{{nazione}}" />
</modulo>

Bene, con il manubrio, possiamo inserire in questo modello un altro modello solo facendo questo:

<h2>Cliente {{customer_name}}</h2>
<il>
    <in>{{indirizzo}}</in>
    <in>{{zip_code}}</in>
    <in>{{città}}</in>
    <in>{{stato}}</in>
    <in>{{nazione}}</in>
</il>
<ID pulsante="edit_customer">modificare</pulsante>
<div class ="edit_form">
    {{> customer_form }}
</Div>

Il problema

tuttavia, come detto in precedenza, questo non è abbastanza. Con questo codice posso di sicuro qualcosa di scrittura come questo nel mio javascript principale:

var html = Handlebars.templates.customer_form();
$('#add_new_customer').aggiungere(.html);

e otterrò il mio Add_customer pagina con il modulo: dal momento che non ho passato alcun dato, il modulo sarà vuoto, come previsto dal momento che voglio aggiungere un nuovo cliente. Ma se provo a caricare la mia edit_customer Pagina sotto forma mancherà.

La soluzione

Per visualizzarlo devo mappare gli oggetti parziali all'oggetto templates prima e poi funzionerà.

Quindi, andare allo script principale javascript e aggiungere questo subito dopo la funzione principale di jQuery (o semplicemente essere sicuri di inserire il codice nella parte inferiore della vostra pagina html come il migliore insegnare pratiche:

$(documento).pronto(funzione(){
    Handlebars.partials = Handlebars.templates;
    
    //Il resto del codice
});

Ora è possibile caricare i dati dei clienti wrapping loro in una variabile come dati dei clienti e quindi chiamare voi edit_customer pagina utilizzando l'teplates precompilati e partial:

var html = Handlebars.templates.customers(dati);
$('#target-div).aggiungere(.html);

Solo per un esempio di sguardo più completo al seguente codice, Pagherei sta ottenendo i dati da un database ospitato su un server tramite una chiamata AJAX e quindi utilizzare manubri termplate per visualizzarli in un div con id lista dei clienti:

$.Ajax(funzione(){
    URL: 'get_customers.php',
    digitare: 'post',
    successo: funzione(clientela){
        per (var io = 0; io < clienti.lunghezza; io++){
            Dati var = clienti[io];
            var html = Handlebars.templates.customers(dati);
            $('#customer_list).aggiungere(.html);
       }
    },
    errore: funzione(jqXHR, textStatus, errorThrow) {
        console.log(textStatus, errorThrow);
    }
});

Per risolvere il mio problema con la mia piccola applicazione Ho cercato su google un sacco e ho trovato diverse risorse utili. La più utile sono stati:

http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro

https://www.raymondcamden.com/2015/03/14/quick-handlebars-tip-concerning-precompilation

E decisiva è stata la soluzione di Nathan a questo thread:

https://stackoverflow.com/questions/12014547/how-do-i-precompile-partials-for-handlebars-js/30589866#12148609

Volevo solo mettere tutto insieme cercando di evitare che altri sviluppatori debbano cercare su Internet per trovare il trucco 🙂 : spero che questo aiuto.