2012-12-06 7 views
8

Ho l'idea del server e del lato client di template, ma dust.js mi confonde un po '.come usare dustjs-linkedin come modello lato client?

Per poter utilizzare dust.js per lato client di template, è necessario tre fasi:

  1. complie il modello
  2. caricare il modello
  3. rendere il modello

Destra?

Ma da dove provengono i modelli? Ho visto due metodi diversi:

1. <script> template <script> 
2. <div> template </div> 

... Entrambi sono nel DOM. Che è corretto?

Inoltre noto che è possibile caricare il modello tramite ajax, quindi il modello non verrà visualizzato nel DOM, ma non so come farlo.

Inoltre, attualmente sto usando jade come motore di visualizzazione rapida. È necessario passare a dust.js? Qual è il vantaggio?

risposta

11

Questa la pagina wiki LinkedIn polvere JS che possono rispondere alle vostre domande e ha ottimi esempi: http://linkedin.github.com/dustjs/

Ma per rispondere alle vostre domande qui:

Sì è necessario compilare il modello di polvere che diventa un JavaScript file che puoi aggiungere alla tua pagina con il tag <script> e quindi chiamare il metodo dust.render per rendere il tuo modello. Ecco un esempio:

  1. scrittura seguente codice in un file di modello e salvarlo come sample.tl

    <p>Hi {firstName} {lastName}</p> 
    
  2. compilazione sample.tl a sample.js da dustc sample.tl in riga di comando o utilizzare dust.compile("your_template_code", "template_name") per compilare il modello e salvare l'output in un file JavaScript (sample.js) oppure utilizzare duster.js per guardare e compilare i modelli per nodejs: https://github.com/dmix/dusterjs

  3. aggiungere sample.js nel tuo html:

    <script type="text/javascript" src="sample.js"></script> 
    

    questo si registrerà anche il modello a dust.cache.

  4. in JavaScript:

    var your_json = {firstName:'James', lastName:'Smith'}; 
    
    dust.render('sample', your_json, function(err, out){ 
    
        your_dom_element.innerHTML = out; 
    
    }); 
    

    Il risultato di cui sopra dust.render metodo sarà <p>Hi James Smith</p>

    Quindi è necessario passare 3 argomenti per dust.render: dust.render(template_name, json, callback)

+0

Sto usando linkedin-dust ed express, come posso accedere a dust.render dal lato client? Suppongo di dover includere un file js, tuttavia devo aggiungere manualmente il suo contenuto come se fosse stato tagliato in modo statico o include un gestore di richieste per il file? – James

+0

Sì, è necessario aggiungere dust-core.js alla pagina per rendere un modello di polvere. È inoltre necessario aggiungere i file dei modelli di polvere compilati. https://github.com/linkedin/dustjs/blob/master/dist/dust-core.js –

0

Come dice la wiki, è possibile utilizzare la polvere nel client o nel server. Se lo usi nel client dovresti ottenere il modello (ad esempio con una richiesta Ajax), compilarlo e renderlo nel browser. Dovrai includere il file script di polvere nella tua pagina.

D'altra parte è possibile utilizzare la polvere nel server (utilizzando rhino o nodejs). In questo caso, compilerai e renderai il modello nel server in modo che il browser possa ricevere html.

+2

A modo, questo è un cattivo consiglio se sei interessato alle prestazioni. È molto meglio se i tuoi template non cambiano, per compilarli una volta e poi servire i template compilati direttamente al client, piuttosto che compilarli sul lato client. In questo modo non è necessario inviare dust.js al client e il client non deve dedicare tempo alla compilazione dei modelli. – fabspro

+1

È consigliabile eseguire la precompilazione su build o come parte dello sviluppo e quindi compilare il modello sul client. In questo modo puoi consentire la memorizzazione nella cache locale dei tuoi modelli. – pilau