Baffi Templating: modelli nidificati

Come posso utilizzare un modello nidificato all’interno di baffi? C’è un modo per fare lo stesso?

var tmpl="{{#data}} 
{{values}}
Name: {{name}}
//{{another_templ({{name.value}})}}
{{/values}}
{{/data}}"

Spero che voi ragazzi ha ottenuto la questione. Non ho aggiunto il carattere di escape per js validità dal codice, è suddivisa in diverse linee.

InformationsquelleAutor Harry | 2011-07-27

 

3 Replies
  1. 8

    Si potrebbe utilizzare una lambda a nido modello:

    function nested_template(template_string, translate) {
      return function() {
        return function(text, render) {
          return Mustache.to_html(template_string, translate(render(text)));
        };
      };
    }
    
    var template_string = 
      "{{#data}}"+
        "{{values}}"+
          "Name: {{name}}"+
          "{{#another_templ}}{{name}}{{/another_templ}}"+
        "{{/values}}"+
      "{{/data}}";
    
    var another_template_string = "<b>{{name}}</b>"; //for example
    
    var view = {
      data: {
        values: {
          name: "Test"
        }
      },
      another_templ: nested_template(another_template_string, function(text) {
        return {name: text};
      });
    };
    
    var result = Mustache.to_html(template_string, view);
    • Ho pensato a questo lavoro aorund.. ma ho pensato che ci potrebbe essere qualcosa di costruito in baffi.. potrei sbagliarmi..
    • No, l’unico modo lambda, a causa partial, non è possibile ottenere i parametri (tranne hack loro: stackoverflow.com/questions/6656093/…).
    • Le sarei grato se poteste indicarmi qualche sito che dà una buona conoscenza abt baffi..
    • Scusa il disturbo, ma qui si sono fondamentalmente reimplementando una funzione esistente, in Baffi. Si dovrebbe usare parziali per questo; l’ho fatto fin dal primo giorno, e renderà il vostro variabili come con qualsiasi altro “normale”, il modello standard. Siete sicuri che si sta utilizzando parziali destra, @marc?
    • Grazie per la tua domanda. IMO parziali non rispondo OP domande, dal momento che non permettono il passaggio di un argomento, ma si basano su i dati attuali ambiente. Nota che la tecnica in questa risposta, consente di riutilizzare il modello di altri in diversi // contesti, mentre i parziali può essere utilizzato solo in una parte fissa contesto (in quanto si aspettano un determinato ambiente di dati, piuttosto che ottenere un argomento arbitrario).
    • Prima di tutto, si noti che ci sembra di parlare di diversi versons di Baffi qui. “Come posso utilizzare un modello nidificato all’interno di baffi?”. Che la OP della domanda. Penso “che Utilizza parziali” le risposte che. Ancora non capisco il tuo ragionamento. Nel tuo esempio, il tuo “argomento arbitrario” è tratta da “i dati specifici dell’ambiente” che si sta passando il lambda. Mi piacerebbe vedere cosa c’è nel tuo esempio che non può essere fatto con un semplice {{>partial}}.
    • Dal momento che è molto vecchia questione, che potrebbe anche essere vero che le cose sono cambiate 🙂 è difficile dire che cosa OP vuole se lui non accetta alcuna risposta. Ma la mia impressione è che si chiede come il passaggio di un argomento per un tempate, {{another_tpl({{name}})}}. Qui tutte le risposte spiegare come fare qualcosa di simile. Pensare ad un modello generico che viene utilizzato ad esempio per fare un testo hanno una piccola icona oltre a richiamare la funzionalità di ricerca. Qualcosa di simile dovrebbe essere utilizzabile con qualsiasi tipo di testo, compreso il testo generato tramite i baffi stesso. Come questo può essere risolto con parziali?

  2. 8

    Ho fatto un esempio di ” nested modelli oltre a jsFiddle.
    Qui è in dettaglio:

    Primo luogo, impostare il codice HTML

    <div class="main"><!-- content here --></div>
    
    <script type="text/html" id="tpl">
        {{#data}}
            {{#names}}
                Name: {{name}}
                {{#nested}}{{name}}{{/nested}}<br>
            {{/names}}
        {{/data}}
    </script>
    
    <script type="text/html" id="tpl-nested">
        &mdash; <b>{{name}}</b>
    </script>​

    Poi il javascript (utilizzando jQuery)

    function renderNested(template_string, translate) {
        return function() {
            return function(text, render) {
                return Mustache.to_html(template_string, translate(render(text)));
            };
        };
    }
    
    var template = $("#tpl").html();
    
    var nested_template = $("#tpl-nested").html();
    
    var model = {
        data: {
            names: [
                { name: "Foo" },
                { name: "Bar" }
            ],
            nested: renderNested(nested_template, function(text) {
                return { name: text };
            })
        }
    };
    
    var result = Mustache.to_html(template, model);
    
    $(".main").html( result );
    • Sono andato in una direzione simile, tranne che ho messo il nome del sub-template a template come {{#nidificati}}tpl-nested{{/nidificati}}, vedere jsfiddle.net/omnius/env3d7wk ma il problema che ho incontrato è stato che non ha funzionato durante la nidificazione più livelli e non so perché non funziona. Pensavo di aver capito che dal momento che stavo usando la stessa renderer tutto il senso giù, si dovrebbe utilizzare lo stesso modello di dati, che comprende le sotto-modello di caricatore. Qualche idea del perché il mio Violino non fa il sub-sub-modelli?
  3. -1

    Qui è un metodo in cui facciamo la sostituzione della stringa prima di compilare i modelli.
    Subtemplates sono chiamati in modelli:
    {{#template}}insertTheNameOfYourSubTemplateHere{{template}}

    templates = {}
    
    function compileTemplates(templateNamesArray) {
        for (index in templateNamesArray) {
            var templateName = templateNamesArray[index];
            var baseHTML = $('#' + templateName).html();
    
            var start = baseHTML.indexOf("{{#template}}");
            while(start != -1) {
                var end = baseHTML.indexOf('{{/template}}', start);
                var nestedTemplateName = baseHTML.slice(start + "{{#template}}".length, end);
                var nestedTemplateEl = $('#' + nestedTemplateName);
                if (nestedTemplateEl.length == 0) {
                    throw "Could not find nested template '" + nestedTemplateName + "' for the template '" + templateName + "'";
                }
                baseHTML = baseHTML.slice(0, start) + nestedTemplateEl.html() + baseHTML.slice(end + '{{/template}}'.length);
                start = baseHTML.indexOf("{{#template}}", start);
            }
            templates[templateName] = Handlebars.compile(baseHTML);
        }
    }
    
    compileTemplates(["templateActiveThreadTab", "templateActiveThreadContent", "templateTodoItem"]);

Lascia un commento