Szablony do wąsowania: szablony zagnieżdżone

Question

Jak mogę użyć szablonu zagnieżdżonego w wąsy? Czy istnieje sposób, aby zrobić to samo?

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

Mam nadzieję, że masz pytanie. Nie dodałem znaku escape dla ważności js, ponieważ kod jest dzielony na różne linie.

Answer 1

Można użyć lambda zagnieździć szablon:

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); 

Answer 2

zrobiłem przykład zagnieżdżonych szablonów na co jsFiddle. Tutaj jest to w szczegółach:

Najpierw skonfiguruj swoją 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>​ 

Następnie javascript (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); 

Answer 3

Oto metoda, w której robimy wymianę strun zanim kompilacji szablony. Subtemplates nazywane są w szablonach przez: {{#template}} insertTheNameOfYourSubTemplateHere {{/ szablon}}

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"]);