Question

我目前正在使用QuickBase数据库尝试使用moustache.js制作自定义报告。当我查看moustach.js时，我注意到您需要使用JSON格式的数据，因此我使用了{http://pastie.org/9364908#16 ）将我的数据导入JSON，然后像（http://pastie.org/9364674#18）

那样出现

我的问题是，当我为此制作模板时，是否需要全部包含在获取json数据的调用的页面中？我已经看过胡子模板的例子了，但是我能找到的只是它用于提供的数据，然后用JSON格式制作，但我需要的时候我需要提供的数据，所以我该如何设置它。？

Answer 1

使用mustache js模板（或一般的js模板）时，您不需要让模板与从ajax调用返回的数据位于同一位置。但是，您需要将数据存储在var中，该var在模板的render函数范围内。我假设您希望在一组数据中使用ajax，将其解析为JSON，然后在某些时候将JSON数据呈现给DOM。所以回答你的问题：

1）模板是否需要包含在JSON数据所在的页面中？不一定，但是您需要能够从一个位置访问这两个部分（即，您将在模板和数据中使用ajax，然后将它们放在一起。或者，您可以将模板作为脚本存储在DOM中[建议的方式，除非你使用AMD]，然后在你的ajax调用完成时呈现模板）。

需要注意的主要事项是，您需要在同一范围内引用模板和数据。

2）设置模板/数据？

这可以通过使用ajax成功回调来完成：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

因此，在成功时，您可以在模板上使用函数调用渲染，或者只是使用数据设置本地范围的变量并在之后处理模板渲染。

3）正常渲染模板

var template = $('#template').html(), //script tage with id="template" from your dom
    data = jsonData, //saved somewhere in a local scoped var .. maybe from an ajax call
    rendered = Mustache.render(template, data),
    target = $("#target"); //where the template renders to

$('#target').html(rendered);

4）通过$ .ajax

渲染模板

$.ajax("/api/data", function(data){
    var jsonData = $.parseJSON(data),
        template = $('#template').html(), //script tage with id="template" from your dom
        rendered = Mustache.render(template, jsonData),
        target = $("#target"); //where the template renders to

});

填充Moustache.js模板

1 个答案: