Moustache Templating: các mẫu lồng nhau

Question

Làm cách nào để sử dụng mẫu lồng nhau trong bộ ria mép? Có cách nào để làm tương tự không?

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

Mong các bạn có câu hỏi. Tôi đã không thêm ký tự thoát cho giá trị js vì mã được chia thành các dòng khác nhau.

Answer 1

Bạn có thể sử dụng một lambda để tổ mẫu:

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

Tôi đã thực hiện một ví dụ về các mẫu lồng nhau qua tại jsFiddle. Dưới đây là chi tiết:

Thứ nhất, thiết lập HTML của bạn

<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>​ 

Sau đó, javascript (sử dụng 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

Đây là một phương pháp mà chúng tôi làm thay thế chuỗi trước khi chúng tôi biên dịch các mẫu. Subtemplates được gọi là trong mẫu theo: {{}} #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"]);