小鬍子模板：嵌套模板

如何在鬍鬚中使用嵌套模板？有沒有辦法做同樣的事情？小鬍子模板：嵌套模板

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

小鬍子模板：嵌套模板

回答

相關問題