Javascript 胡须模板：嵌套模板

如何在mustache中使用嵌套模板？有没有办法做到这一点

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

---

希望你们有问题。我没有为js validity添加转义字符，因为代码被分割到不同的行。

您可以使用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);

函数嵌套模板（模板字符串，翻译）{
返回函数（）{
返回函数（文本、渲染）{
返回Mustache.to_html（模板字符串，翻译（呈现（文本））；
};
};
}
变量模板\u字符串=
“{{#数据}}”+
“{{values}}”+
“名称：{{Name}}”+
“{{{{{35;另一个{temp}}{{{name}}{{/另一个{temp}}”+
“{{/values}}”+
“{{/data}}”；
var另一个模板字符串=“{name}”//例如
变量视图={
数据：{
价值观：{
名称：“测试”
}
},
另一个模板：嵌套的模板（另一个模板字符串，函数（文本）{
返回{name:text}；
});
};
var result=Mustache.to_html（模板字符串，视图）；

我在上做了一个嵌套模板的示例。 详细内容如下：

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

---

下面是一个在编译模板之前进行字符串替换的方法。 子模板在模板中通过以下方式调用： {{{template}}在此处插入子模板的名称{/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"]);

---

我想到了这项工作。。但我想胡子里可能有什么东西。。我可能错了。@Harry:不，唯一的方法是lambdas，因为partials无法获取参数（除非你破解它们：）。如果你能告诉我一些提供abt mustache的网站，我将不胜感激。很抱歉打扰你，但这里你基本上是在重新实现mustache中的现有功能。你应该为此使用partials；我从第一天就开始做了，它会像其他任何“普通”标准模板一样呈现你的变量。你确定你用的是分部词吗，@marc？谢谢你的提问。IMO部分不回答OP的问题，因为它们不允许传递参数，而是依赖于当前的数据环境。请注意，此答案中的技术允许在/different/context中重用其他模板，而partials只能在固定的上下文中使用（因为它们需要特定的数据环境，而不是获取任意参数）。为什么不使用partials呢？我走了一个类似的方向，除了我把子模板的名称放在模板中，比如{{{nested}}tpl nested{{{/nested}}，但是我遇到的问题是，当嵌套多个级别时，它不起作用，我不知道为什么它不起作用。我想我已经理解了，因为我一直在使用相同的渲染器，所以它应该使用相同的数据模型，其中包括子模板加载程序。你知道为什么我的小提琴不做子模板吗？

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