Handlebars.js错过JSON数据

我通过这个获得通过Require.js装载模板文件：Handlebars.js错过JSON数据

主app.js

define([ 
     'backboneLoader', 
     'handlebars', 
     'text!templates/main.html', 
     'text!appdata.json' 
    ], 
    function(
     Backbone, 
     Handlebars, 
     MainTemplate, 
     AppData 
    ) { 
     "use strict"; 

     return Backbone.View.extend({ 
      initialize : function() { 
       this.render(); 
      }, 

      render : function() { 
       var template = Handlebars.compile(MainTemplate); 
       var output = template(AppData); 
       this.$el.append(output); 
       console.log("appData:\n" + AppData); 
       console.log("MainTemplate:\n" + MainTemplate); 
       console.log("Output:\n" + output); 
        //smth extra 
       return this; 
      } 
     }); 
    } 
);

MainTemplate（main.html中）

<ul> 
    <li><b>Version:</b> {{version}}</li> 
    <li><b>Author:</b> {{author}}</li> 
</ul>

应用程序数据（appdata.json）

{version: "0.0.1", author: "John Doe"}

输出：

<ul> 
    <li><b>Version:</b></li> 
    <li><b>Author:</b></li> 
</ul>

虽然预期输出：

<ul> 
     <li><b>Version:</b> 0.0.1</li> 
     <li><b>Author:</b> John Doe</li> 
</ul>

任何想法，我究竟做错了什么？谢谢！

UPD： 问题解决了。下面是更新主app.js：

define([ 
     'backboneLoader', 
     'handlebars', 
     'text!templates/main.html!strip', 
     'text!appdata.json' 
    ], 
    function(
     Backbone, 
     Handlebars, 
     mainTemplate, 
     appData 
    ) { 
     "use strict"; 

     return Backbone.View.extend({ 
      initialize : function() { 
       this.render(); 
      }, 

      render : function() { 
       var template = Handlebars.compile(mainTemplate); 
       var output = template(eval("(" + appData + ")")); //Object is expected by template(), not JSON. 
       this.$el.append(output); 
       console.log("appData:\n" + appData); 
       console.log("template:\n" + mainTemplate); 
       console.log("Output:\n" + output); 
        //smth extra 
       return this; 
      } 
     }); 
    } 
);

来源

2012-03-26 Aleksandr Tkachev

问题已解决。我刚刚取代： var output = template（AppData）; with： var output = template（eval（“（”+ appData +“）”））; – 2012-03-26 11:44:09

请不要使用'eval'！这是不好的做法，也是一个安全缺陷，因为如果任何JavaScript文本在文本中，它将被评估。最好使用'JSON.parse（appData）'。您可能需要包含'json2.js'来为旧浏览器（<= IE7）添加JSON支持：https://github.com/douglascrockford/JSON-js/ – frontendbeauty 2012-08-01 19:46:58

这是你的模板函数的jsFiddle repro，模板转换似乎工作，该问题可能是在文本中找到！函数在require.js代码中，尝试调试文本！功能。

也尝试加载模板时添加条功能：“文本模板/ main.html中带！”，

文档建议吧：For HTML/XML/SVG files, there is another option. You can pass !strip, which strips XML declarations so that external SVG and XML documents can be added to a document without worry.

来源

2012-03-26 07:49:39

谢谢您的回答！但没有任何帮助。仍然“潜伏”的原因。看起来像“文本！AppData.json”错误。 – 2012-03-26 10:06:43

的问题是AppData是一个字符串！的JSON，而不是一个实际的对象。简单地改变来自：

var output = template(AppData);

到

var output = template(JSON.parse(AppData));

您可能需要包括json2.js增加对旧的浏览器支持JSON（< = IE7）。

来源

2012-08-01 19:49:27 frontendbeauty

Handlebars.js错过JSON数据

回答

相关问题