javascript - Mustache.js - 接受输入作为变量，但不接受 ajax 获取 : How to import or troubleshoot

Question

以此为例: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.htmltheJson.txt 是 JSON。它被正确拉动。 console.log(data.header) 正确返回。Must_template.js 是 Mustache 模板文件(从外部拉取将允许不同的主题)。

Answer 1

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