Question

我在这里有一个问题

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

-----------
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个人：）

感谢

Answer 1

您真正需要做的就是清理变量并正确构建partials对象。 json1和json2未定义，应分别为user和translations。您正在使用类似于引用未定义three的部分对象覆盖one模板。

您的部分对象需要将模板名称作为键（即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");

这会输出this jsFiddle

中所示的预期“joe blogs”

Answer 2

我正在寻找类似的东西并编写了一个快速函数来获取任意模板文件并生成适当的partials变量：

  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 个答案: