车把不显示内容

时间:2016-06-09 22:27:26

标签: javascript html handlebars.js

所以我从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);	

非常感谢你。

1 个答案:

答案 0 :(得分:1)

请在test.js之前包含data.js.否则,在使用把手生成html字符串时,testdata是未定义的。以下代码

import Firebase

适合我。

相关问题