Daten können nicht an die Lenkervorlage weitergegeben werden

Ich befolge das Lernprogramm unter https://www.youtube.com/watch?v=3zVYH16yogQ&t=58s über das Rendern von Daten in der Lenkervorlage, aber es scheint nicht möglich zu sein, die Daten an die Vorlage zu übergeben.Daten können nicht an die Lenkervorlage weitergegeben werden

Meine global.js Datei:

$(document).ready(function(){ 



var source = $("#first-template").html(); 
var template = Handlebars.compile(source); 


var context = { 
    title1 : "hello", 
    body1 : "body1" 
} 

var el_html = template(context); 

$("#render_here").html(el_html); 
$("#render_here_again").html(el_html); 


});

Meine Ansicht Datei:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <script type="text/javascript" src="../javascripts/global.js"> </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 


</head> 
<body> 
    <button name = "click" id ="click" >click </button> 
<div id ="render_here"> 
    first 
</div> 

<div id ="render_here_again"> 
    second 
</div> 

<script id = "first-template" type="text/x-handlebars-template"> 
      <div> 
       <h1 style ="color:green">{{title1}}</h1> 
       <h2 style ="color:blue">{{body1}}</h2> 
     </div> 
</script> 
</body> 
</html>

Wenn die Seite die Daten aus dem Kontextvariable Rendering sollte jedoch geladen werden, es ist leer. Ich kann das Objekt sehen, wenn ich es in der Konsole logge, und wenn ich console.log (el_html), die Skriptvorlage kommt aber ohne den Kontext. Irgendeine Idee, was ich falsch mache?

Quelle

2017-03-05 user

Das funktioniert für mich. Hier ist der Code - die einzige wirkliche Änderung, die ich machte, war die global.js inline zu setzen und die Version von jQuery zu modernisieren:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Page Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script> 
 
     $(document).ready(function(){ 
 

 
      var source = $("#first-template").html(); 
 
      var template = Handlebars.compile(source); 
 

 
      var context = { 
 
       title1 : "hello", 
 
       body1 : "body1" 
 
      }; 
 

 
      var el_html = template(context); 
 

 
      $("#render_here").html(el_html); 
 
      $("#render_here_again").html(el_html); 
 

 
     }); 
 
    </script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<button name = "click" id ="click" >click </button> 
 
<div id ="render_here"> 
 
    first 
 
</div> 
 

 
<div id ="render_here_again"> 
 
    second 
 
</div> 
 

 
<script id = "first-template" type="text/x-handlebars-template"> 
 
    <div> 
 
     <h1 style ="color:green">{{title1}}</h1> 
 
     <h2 style ="color:blue">{{body1}}</h2> 
 
    </div> 
 
</script> 
 

 
</body> 
 
</html>

Auch Sie verwenden eine alte Version von jQuery . Ich würde zu etwas jüngerem wechseln - mindestens 2.x. Es gibt keinen Grund mehr, v1.x zu verwenden.

Quelle

2017-03-05 22:23:13 rasmeister

aus irgendeinem Grund meine Seite ist immer noch leer, das ist eine Totale, aber würden Sie von etwas anderem wissen, die es stören könnte? Ich benutze node.js mongodb express und lenker – user

Also, wenn Sie meinen Code in Ihrer Umgebung ausführen, erhalten Sie eine leere Seite? – rasmeister

Ja, es ist komplett leer bis auf die Schaltfläche .. Ich kann es nicht herausfinden, aber ich kann den Kontext erfassen, wenn ich es in der Konsole logge, bevor ich es rende .. es ist nach dem Rendern der Seite der Kontext scheint irgendwo verloren gehen – user

Daten können nicht an die Lenkervorlage weitergegeben werden

Antwort

Verwandte Themen