无法显示内容的把手

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

非常感谢这一点。

来源

2016-06-09 Vĩnh Lộc

在test.js之前包含data.js，并且还考虑将代码包装在文档中。 –

@HectorBarbossa你会介意准备一个完整的答案吗？ – Jerzyk

@Jerzyk Just did :) –

请在test.js之前包含data.js。否则，在使用句柄生成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); 

    });

适用于我。

来源

2016-06-09 22:39:32

无法显示内容的把手

回答

相关问题