Mustache.js - 接受输入作为 vars，但不接受 ajax：如何导入或排除故障答案

【问题标题】：Mustache.js - accepts inputs as vars, but not as ajax gets: How to import or troubleshootMustache.js - 接受输入作为 vars，但不接受 ajax：如何导入或排除故障
【发布时间】：2011-03-21 22:20:47
【问题描述】：

以此为例：http://mustache.github.com/#demo，模板和 json 可以在功能上移动到 var：

template = '<h1>{{header}}</h1>{{#items}}{{#first}}<li><strong>{{name}}</strong></li> {{/first}}{{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}}{{/items}}{{#empty}} <p>The list is empty.</p>{{/empty}}';

这就是问题所在：

$.ajax({
    url: "must_template.js",
    dataType: "html",
    success: function(data) {
    template = data;
    }
});

和

$.ajax({
url: "theJson2.txt",
dataType: "json",
success: function(data) {
        json = data;
        //json = $.parseJSON(data);
    }
});

Chrome 的控制台显示与 var 完全相同的内容，但 Mustache 在输入时中断，因为它们在输入时是“未定义”：

Uncaught TypeError: Cannot call method 'indexOf' of Undefined

我尝试更改数据类型，使用 $.parseJSON 解析它，但从外部文件导入模板或 JSON 时没有任何效果。

如果有任何解决 javascript 对象问题的提示，我们也将不胜感激。

更新：代码在这里：http://dev.plitto.com/sandbox/mustache_riff/index4.html theJson.txt 是 JSON。它被正确拉动。 console.log(data.header) 正确返回。 must_template.js 是 Mustache 模板文件（从外部拉取将允许不同的主题）。

【问题讨论】：

标签： javascript jquery templating

【解决方案1】：

两者有什么区别？ Json2.txt 和 must_template.js 中有什么？

解析 JSON：

data = JSON.parse(data);

要查看对象中的内容，请使用 Firebug 或 Safari / Chrome 中的 JS 控制台：

console.log(data);

如果您获得更多信息，我们可以提供更多帮助:)

【讨论】：

【解决方案2】：

原来这是一个范围问题。

模板变量在$.ajax()调用之前定义，值只在$.ajax调用内有效。

【讨论】：

这是修复它的代码：json = $.ajax({ url: "theJson.txt", dataType: "json", async: false }).responseText;

【解决方案3】：

AJAX 请求是异步请求。如果您在 ajax 函数调用之外执行了 mustache to_html，那么它将无法工作。因为它会在 AJAX 请求之前执行。

试试下面的。

must_template.html 文件将包含，

<h1>{{header}}</h1>
{{#items}}{{#first}}
<li><strong>{{name}}</strong></li> 
{{/first}}{{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}}{{/items}}   
{{#empty}} <p>The list is empty.</p>{{/empty}}

你的代码将是

$.ajax({
       url: "must_template.html",
       dataType: "html",
       success: function(data) {
           var template = data;

           $.ajax({
                      url: "theJson2.txt",
                      dataType: "json",
                      success: function(data2) {
                          var json = data2;
                          var html = Mustache.to_html(template, json);
                          $("#yourtargettag").html(html);                              
                      }
                  });
       }
   });

【讨论】：

【解决方案4】：

有关 Mustache / jQuery 的工作示例，请参见 http://blog.xoundboy.com/?p=535

【讨论】：