无法将数据传递给车把模板答案

【问题标题】：Can't pass data to handlebars template无法将数据传递给车把模板
【发布时间】：2017-03-05 21:26:36
【问题描述】：

我正在关注https://www.youtube.com/watch?v=3zVYH16yogQ&t=58s 上关于在车把模板中呈现数据的教程，但似乎无法将数据传递给模板。

我的 global.js 文件：

    $(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);


});

我的视图文件：

    <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>

渲染页面时，应加载上下文变量中的数据，但它是空白的。当我在控制台中记录它时，我可以看到该对象，当我 console.log(el_html) 脚本模板出现但没有上下文时。知道我做错了什么吗？

【问题讨论】：

标签： node.js handlebars.js templating

【解决方案1】：

这对我有用。下面是代码——我做的唯一真正的改变是把 global.js 内联并更新 jQuery 的版本：

<!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>

另外，您使用的是旧版本的 jQuery。我会转向更新的东西——至少 2.x。没有理由再使用 v1.x。

【讨论】：

由于某种原因，我的页面仍然是空白的，这是一个很长的镜头，但您知道还有什么可能会干扰它吗？我正在使用 node.js mongodb express 和车把
那么当你在你的环境中运行我的代码时，你会得到一个空白页？
是的，除了按钮之外，它完全是空白的。我无法弄清楚，但如果我在渲染之前将其记录在控制台中，我可以捕获上下文。它在我渲染页面之后上下文似乎在某处迷失了