Handlebars.js vermisst JSON-Daten

Question

ich von Require.js über diese geladen Template-Datei haben:

Haupt 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 (appdata.json)

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

und Ausgang:

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

Während erwartete Ausgabe:

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

Irgendwelche Ideen, was mache ich falsch? Vielen Dank!

UPD: Problem gelöst. Hier wird aktualisiert Haupt 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; 
      } 
     }); 
    } 
); 

Answer 1

hier ein jsFiddle repro Ihrer Template-Funktion ist, scheint die Vorlage Transformationen arbeiten, wird das Problem wahrscheinlich im Text zu finden! Funktion in require.js Code, versuchen Sie den Text zu debuggen! Funktion.

Versuchen Sie auch den Streifen Funktion hinzuzufügen, wenn die Vorlage geladen: 'Textvorlagen/main.html Streifen!',

Die Dokumentation schlägt vor: 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.

Answer 2

Das Problem ist AppData ist ein String von JSON, kein tatsächliches Objekt. Einfach aus ändern:

var output = template(AppData);

zu

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

können Sie benötigen json2.js enthalten JSON-Unterstützung für ältere Browser (< = IE7) hinzuzufügen.