web-dev-qa-db-fra.com

Guidon Passer une ficelle ou un guidon AST compiler le guidon

Je sais que cela a été demandé à plusieurs reprises, j'ai examiné les réponses et je ne sais pas trop où je me trompe. 

J'ai consulté la documentation sur Handlebarsjs et suivi un tutoriel. Les deux fois, je reçois la même erreur. 

<!DOCTYPE html>
<html>
  <head>
     <script src="handlebars-v1.3.0.js"></script>
     <script src="jquery.min.js"></script>
     <script src="test.js"></script>
  </head>
  <body>
    <script id="header" type="text/x-handlebars-template">
      div {{ headerTitle }} div
      Today is {{weekDay}}
    </script>
  </body>   
</html>

Et c'est mon Javascript

var theData = {headerTitle:"name", weekDay:"monday"}
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document.body).append(theTemplate(theData));

Je continue à avoir l'erreur suivante et je ne sais pas pourquoi 

Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. 
You passed undefined
javascripthtmlhandlebars.js
12
user3765218

Vous exécutez Handlebars.compile () avant que leTemplateScript ne soit chargé dans le DOM. Déplacez votre test.js en dessous du script de modèle et vous devriez être prêt à partir.

22
Rob_vH

Déplacer les scripts au bas de la page a également fonctionné pour moi.

<!DOCTYPE html>
 <html>
   <head>

   </head>
     <body>
        <script id="header" type="text/x-handlebars-template">
            div {{ headerTitle }} div
            Today is {{weekDay}}
        </script>

        <script src="handlebars-v1.3.0.js"></script>
        <script src="jquery.min.js"></script>
        <script src="test.js"></script>

   </body>   
 </html>
7
Mark

Comme d'autres l'ont dit, le problème est que vous exécutez Handlebars.compile() avant que le TemplateScript ne soit chargé dans le DOM.

En mettant vos appels javascript dans $(document).ready(), vous vous assurez que tout le code HTML est chargé en premier.

var theData = {headerTitle:"name", weekDay:"monday"}

$(document).ready(function(){
  var theData = {headerTitle:"name", weekDay:"monday"}
  var theTemplateScript = $("#header").html();
  var theTemplate = Handlebars.compile(theTemplateScript);
  $(document.body).append(theTemplate(theData));
});
1
Heidi

dans mon cas, j'essayais d'attribuer une certaine valeur à des étapes plus profondes, donc, j'ai fait face à l'erreur. 

Avant mon code était

app.use(function (req, res, next) { res.locals.partials.weather = {}; = getWeatherData(); next(); });

et le problème était 

res.locals.partiels. météo

après avoir retiré le calquepartialmon problème avait disparu.

et le code final est 

app.use(function (req, res, next) { res.locals.weather = getWeatherData(); next(); });

0
sh6210

Dans mon cas, j'ai eu la même erreur, mais le problème était une faute de frappe dans le script de modèle dans la page HTML. J'avais 'prouct-template' aurait dû être 'product-template':

    <script id="prouct-template" type="text/x-handlebars-template">
    ...
    </script>

Une fois que j'ai corrigé la faute de frappe, l'erreur a disparu et la page a été chargée correctement.

0
striker77

Un peu de modification est nécessaire dans le fichier JavaScript. J'ai eu le même problème. Dans mon code, j'ai appelé "guidon" dans Vues (l'explication suivante concerne les vues).

Inclure les éléments suivants dans la fonction d'initialisation (init) de View: 

theTemplate = Handlebars.compile (theTemplateScript);

Dans le rendu, écrivez le code restant:

var theTemplate = Handlebars.compile (theTemplateScript); $ (document.body) .append (theTemplate (theData));

La méthode correcte consiste à précompiler le gestionnaire, Stocker dans un fichier, puis l’assigner à theTemplate.

0
rkkkk