小胡子模板：嵌套模板

如何在胡须中使用嵌套模板？有没有办法做同样的事情？小胡子模板：嵌套模板

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

希望你们有这个问题。由于代码被分割到不同的行，因此我没有为js有效性添加转义字符。

来源

2011-07-27 Harry

你为什么不使用谐音？ https://mustache.github.io/mustache.5.html#Partials – Pere

你可以使用lambda窝模板：

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

来源

2011-07-27 15:43:16 marc

我认为这项工作的aorund ..但我想可能有一些内置的胡子。我可能是错的.. – Harry

@Harry：没有，唯一的方法是lambda，因为partials不能获取参数（除非你破解它们：http://stackoverflow.com/questions/6656093/mustache-partials-using-variable-syntax-without-the）。 – marc

如果你能指导我的某个网站，提供一个很好的知识abt胡子，我将不胜感激。 – Harry

我在jsFiddle由嵌套模板的例子了。这是详细：

首先，设置你的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>

然后（使用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);

来源

2012-08-10 00:11:39 Josh

我去了一个类似的方向，除了我把子模板的名称在模板，像{{#nested}} TPL-嵌套{{/嵌套}}，见https://jsfiddle.net/omnius/env3d7wk/但是我遇到的问题是嵌套多个层次时不起作用，我不知道为什么不起作用。我以为我明白了，因为我一直在使用相同的渲染器，所以应该使用相同的数据模型，其中包括子模板加载器。任何想法为什么我的小提琴不做子子模板？ –

-1

这里有一个方法，我们做字符串替换我们编译之前的JavaScript模板。子模板被称为模板： {{#template}} insertTheNameOfYourSubTemplateHere {{/模板}}

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

来源

2013-02-14 07:53:06

小胡子模板：嵌套模板

回答

相关问题