1

我有一个亟待解决的问题

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

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

谢谢

4

2 回答 2

2

你真正需要做的就是清理你的变量并正确地形成你的partials对象。json1和json2没有定义，应该是user和translations分别。您正在three用看起来像引用 undefined 的部分对象覆盖模板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");

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

于 2012-07-27T19:14:43.810 回答
0

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

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

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

于 2014-02-24T09:20:15.220 回答