Come conservare i miei modelli di baffi/manubri in file separati?

Question

Sto usando handlebars.js su un progetto e sto iniziando ad avere una discreta quantità di modelli. Per ora sono immagazzinate nel mio file di modello di applicazione principale, in questo modo:

<script id="avatar_tpl" type="text/html"> 
bla bla bla {{var}} bla bla bla 
</script> 

Mi chiedo se c'è un modo per metterli in un file separato, come un file .js o qualcosa del genere, per evitare di accatastamento li nella mia pagina di codice sorgente.

Sono consapevole che esistono diverse soluzioni per richiamare i modelli di tesi tramite Ajax, ma ciò sembra comportare richieste troppo inutili per me.

Grazie

Answer 1

Ho creato e open-source NodeInterval per questo stesso identico problema di troppi modelli js nella mia pagina HTML.

Consente di inserire tutti i modelli in una cartella di modelli organizzata in qualsiasi gerarchia che ti piace. Ha una capacità integrata in watch in modo che, quando si modifica uno di questi modelli, si aggiorni automaticamente la pagina HTML. Lo uso a fianco dello SASS per il mio CSS.

lo uso tutti i giorni con i modelli di sottolineatura ma dovrebbe funzionare bene con i modelli baffi così:

https://github.com/krunkosaurus/NodeInterval

Answer 2

io non sono a conoscenza, ma handlebars.js, avete provato questo ?:

<script id="avatar_tpl" type="text/html" src="myscript.html"></script> 

Answer 3

Impossibile basta includere un file js con i modelli come variabili js? Non testato, basta pensare qui:

//in your html page 
<script id="avatar_tpl" type="text/html" src="mytemplates.js"></script> 

// then in your mytemplates.js file 
var template_1 = "{{ content }}"; 
var template_2 = "{{ content }}"; 

// and you could use it like this back in html page 
var template1 = Handlebars.compile(template_1); 
var template2 = Handlebars.compile(template_2); 

Answer 4

Ho eseguito il rollover di tutti i miei script e modelli in un unico file .js per diversi progetti. Io uso uno strumento di compilazione basato su Java, formica, per concatenare e gestire vari script di elaborazione per il mio js.

Il problema più grande con la memorizzazione di modelli di grandi dimensioni in variabili javascript è la mancanza di stringhe multilinea di javascript. Mi occupo di questo scrivendo i miei file con un pitone come triple-citazione sintassi:

var templateVariable = ''' 
    <div> 
    <div></div> 
    </div> 
''' 

Ho quindi eseguito questo custom-sintassi file javascript se lo script python riportato qui di seguito, che si trasforma in a JavaScript legale:

#!/usr/bin/env python 
# encoding: utf-8 
""" 
untitled.py 

Created by Morgan Packard on 2009-08-24. 
Copyright (c) 2009 __MyCompanyName__. All rights reserved. 
""" 

import sys 
import os 


def main(): 
    f = open(sys.argv[1], 'r') 
    contents = f.read() 
    f.close 

    split = contents.split("'''") 

    print "split length: " + str(len(split)) 

    processed = "" 

    for i in range(0, len(split)): 
     chunk = split[i] 
     if i % 2 == 1: 
      processedChunk = "" 
      for i,line in enumerate(chunk.split("\n")): 
       if i != 0: 
        processedChunk = processedChunk + "+ " 
       processedChunk = processedChunk + "\"" + line.strip().replace("\"", "\\\"").replace('\'', '\\\'') + "\"" + "\n" 
      chunk = processedChunk 
     processed = processed + chunk 


    f = open(sys.argv[1], 'w') 
    f.write(processed) 
    f.close() 


if __name__ == '__main__': 
    main() 

In questo modo, posso codificare i modelli in html più o meno puro e distribuirli, insieme al codice dell'applicazione, all'interno di un singolo file .js.

Answer 5

se si utilizza jQuery, è possibile creare un div invisibile con id "template-holder"

quindi utilizzare:

$("#template-holder").load([url here]) 

per caricare il html all'interno di div poi Uso:

var templatestr = $("#template-holder").find("#avatar_tpl").html() 

per ottenere il modello

:)

Answer 6

ho creato un carico pigro file JavaScript che carica i modelli solo se necessario. Sta eseguendo le chiamate AJAX, ma sembra funzionare abbastanza bene.

var Leuly = Leuly || {}; 

Leuly.TemplateManager = (function ($) { 
    var my = {}; 

    my.Templates = {}; 

    my.BaseUrl = "/Templates/"; 

    my.Initialize = function (options) { 
     /// <summary> 
     /// Initializes any settings needed for the template manager to start. 
     /// </summary> 
     /// <param name="options">sets any optional parameters needed</param> 

     if (options && options.BaseUrl) { 
      my.BaseUrl = options.BaseUrl; 
     } 
    }; 

    my.GetTemplate = function (templateName, success, baseUrl) { 
     /// <summary> 
     /// makes a request to retrieve a particular template 
     /// </summary> 
     /// <param name="templateName">name of the template to retrieve</param> 
     /// <param name="success">event returning the success</param> 
     var template = my.Templates[templateName]; 

     if (template == null) { 
      template = my.LoadTemplate(templateName, success, baseUrl); 
     } 
     else { 
      success(template, true); 
     } 
    }; 

    my.LoadTemplate = function (templateName, success, baseUrl) { 
     /// <summary> 
     /// makes a request to load the template from the template source 
     /// </summary> 
     /// <param name="templateName">name of the template to retrieve</param> 
     /// <param name="success">event returning the success</param> 
     var root = baseUrl == null ? my.BaseUrl : baseUrl; 
     $.get(root + templateName, function (result) { 
      my.Templates[templateName] = result; 

      if (result != null && success != null) { 
       success(result, true); 
      } 
     }); 
    }; 

    return my; 
} (jQuery)); 

$(function() { 
    Leuly.TemplateManager.Initialize(); 
});