小胡子中的嵌套部分和从外部文件加载部分答案

【问题标题】：Nested partials in mustache and loading partials from external file小胡子中的嵌套部分和从外部文件加载部分
【发布时间】：2012-07-25 10:01:28
【问题描述】：

我有一个亟待解决的问题

是否可以将一个部分嵌套在另一个部分中这就是我想做的事情

-----------
index.html:
-----------
<html>
<head>
 <script src="jquery.js"></script>
 <script src="mustache.js"></script>
 <script src="javascript.js"></script>
 <script src="json1.js"></script>
 <script src="json2.js"></script>
<head>
<body>
<div id="mustacheContainer"></div>
</body>
<html>

--------------
test.mustache: (this file contains main template and partials)
--------------
<script id="tpl-one" type="text/html"><!--main template -->
{{fname}}
{{> tplThree}}
</script>

<script id="tpl-two" type="text/html">
{{lname}}
</script>

<script id="tpl-three" type="text/html">
{{> tplTwo}}
</script>

---------
json1.js:
---------
var user={
 fname:'joe',
 lname:'blogs',
}

---------
json2.js:
---------
var translations={
 someword:'its translation'
}

-------------------
javascript.js file:
-------------------
;$(function () {
    $.get('test.mustache', function(templates) {
        var template = $(templates).filter('#tpl-one').html();
        $.extend(json1,json2);
        var three = $(templates).filter('#tpl-three').html();
        three = {"tplThree": one};
        var html = Mustache.to_html(template, json1, three);
        $('#confirmationMustacheContainer').html(html);
    }, "html");

});

现在的问题 为什么这不起作用？我做错了什么，是这个上下文问题还是小胡子不支持嵌套，有没有办法做到这一点？使用 jquery，如何从外部文件加载部分？

这些问题很多，我希望有人能回答，因为它会帮助很多用户我会给这个 5 ups :)

谢谢

【问题讨论】：

stackoverflow，不允许你放弃 5 个 ups，除非你提供赏金。:)

标签： jquery partials mustache

【解决方案1】：

我想做类似的事情并编写了一个快速函数来获取任意模板文件并生成适当的部分变量：

  var partials = {};
  $.ajax({
    'url': '/templates/common.mustache',
    'async': false,
    'success': function( template_partials ) {
      $(template_partials).filter( 'script' ).each(function(index,piece) {
        partials[piece.id] = piece.innerHTML;
      })
    }});

  var html = $.mustache(template, jsonData, partials)
  $("div.content").html(html);

这也可能有助于清理和概括您的代码。

【讨论】：

【解决方案2】：

你真正需要做的就是清理你的变量并正确地形成你的 partials 对象。 json1 和 json2 未定义，应分别为 user 和 translations。您正在用看起来像引用未定义的one 的部分对象覆盖three 模板。

您的部分对象需要将模板名称作为键（即tplTwo）并将部分文本作为值（即{{lname}}）。

这是清理后的代码：

// json1.js
var user = {
    fname: 'joe',
    lname: 'blogs',
}
// json2.js
var translations = {
    someword: 'its translation'
}

$.get('test.mustache', function(templates) {
    var json = $.extend(user, translations),
        one = $(templates).filter('#tpl-one').html(),
        three = $(templates).filter('#tpl-three').html(),
        two = $(templates).filter('#tpl-two').html(),
        partials = {
            "tplThree": three,
            "tplTwo": two
        };

    var html = Mustache.to_html(one, json, partials);
    $('#mustacheContainer').html(html);
}, "html");

这会输出预期的“joe blogs”，如this jsFiddle 中所示

【讨论】：