把手不显示内容

Question

所以我从 Handlebars.js 开始，我真的不知道来龙去脉。请耐心等待我。

我有三个文件，test.html、test.js 和 data.js。我希望 test.html 通过 test.js 中的 Handlebars 显示 data.js 中的数据。但是，看不到任何内容。我认为解决方案可能在于在某处调用函数，但我不知道是什么函数，也不知道在哪里。

代码如下：

test.html

<head>
  <script src="js/jquery.js">
  </script>
  <script src="js/handlebars-v3.0.3.js">
  </script>
  <script src="test.js">
  </script>
  <script src="data.js">
  </script>
  <script src="js/bootstrap.js">
  </script>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/gallery.css" rel="stylesheet">
</head>
<body>
  <script id="image-templatexxx" type="text/x-handlebars-template">
    {{name}}</br>
    {{author}}</br>
    <img style="height:600" src="{{src}}" />
  </script>
  <div id="test-content">
  </div>
</body>

data.js

var testdata = {
  src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
  name: "The Earth seen from Apollo 17",
  author: "Ed g2s"
};

test.js

var source   = $("#image-templatexxx").html();
var testtemplate = Handlebars.compile(source);
var testhtml    = testtemplate(testdata);
$('#test-content').html(testhtml);

非常感谢。

Answer 1

请在 test.js 前加上 data.js。否则，在使用 handlebars 生成 html 字符串时，testdata 是未定义的。下面的代码

$(document).ready(function() {
  var testdata = {
    src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
    name: "The Earth seen from Apollo 17",
    author: "Ed g2s"
  };
  var source = $("#image-templatexxx").html();
  var testtemplate = Handlebars.compile(source);
  var testhtml = testtemplate(testdata);

  $('#test-content').html(testhtml);
});

适合我。

把手不显示内容

Handlebars not displaying the content

html

javascript

handlebars.js