车把不输出任何东西
Handlebars does not output anything
在文件的开头我定义了 Handlebars 等:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<!-- endbower -->
<!-- endbuild -->
在 index.html
文件的末尾,我拉入了我的 Handlebars 文件:
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/serverHandler.js"></script>
<script src="scripts/driver.js"></script>
<!-- endbuild -->
包含 Handlebars 相关代码的文件是 driver.js
。它看起来像这样:
driver = {
someBoolean : false,
name : null,
startTime: new Date(),
position : null
};
source = $('#drive-buttons-template').html();
template = Handlebars.compile(source);
template(driver);
模板在 index.html
文件中,在加载 Handlebars.js 文件和我的文件之间:
<script id="drive-buttons-template" type="text/x-handlebars-template">
<button type="button" class="btn btn-default btn-lg">
{{#if someBoolean}} <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> Start
{{else}} <span class="glyphicon glyphicon-play" aria-hidden="true"</span> Stop {{/if}}
</button> </script>
我试过在 TryHandlebars 上编译它,它在那里工作,这让我觉得我的设置有问题。当我加载页面时,它没有给我任何错误,但也没有显示任何内容。我可以从控制台使用 Handlebars-methods 等,但它不会改变任何东西。
希望这不仅仅是我错过了一些重要的事情,但很可能是这样。
非常感谢所有帮助。提前致谢!
更新:
在控制台中进行一些实验:
我可以访问 template
、driver
和 source
。调用template(driver)
returns右边HTML,但是网站没有更新。
可能没说清楚,我本地开发环境用的是Grunt,Handlebars是用Bower安装的。 Gruntfile 由 Yeoman 制作。
我在 this JSFiddle 的最后一行找到了我的解决方案。我给出了模板是 ID 的标签,并使用了:
$('#tagIDName').append(template(driver));
而不只是 template(driver);
在文件的开头我定义了 Handlebars 等:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<!-- endbower -->
<!-- endbuild -->
在 index.html
文件的末尾,我拉入了我的 Handlebars 文件:
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/serverHandler.js"></script>
<script src="scripts/driver.js"></script>
<!-- endbuild -->
包含 Handlebars 相关代码的文件是 driver.js
。它看起来像这样:
driver = {
someBoolean : false,
name : null,
startTime: new Date(),
position : null
};
source = $('#drive-buttons-template').html();
template = Handlebars.compile(source);
template(driver);
模板在 index.html
文件中,在加载 Handlebars.js 文件和我的文件之间:
<script id="drive-buttons-template" type="text/x-handlebars-template">
<button type="button" class="btn btn-default btn-lg">
{{#if someBoolean}} <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> Start
{{else}} <span class="glyphicon glyphicon-play" aria-hidden="true"</span> Stop {{/if}}
</button> </script>
我试过在 TryHandlebars 上编译它,它在那里工作,这让我觉得我的设置有问题。当我加载页面时,它没有给我任何错误,但也没有显示任何内容。我可以从控制台使用 Handlebars-methods 等,但它不会改变任何东西。
希望这不仅仅是我错过了一些重要的事情,但很可能是这样。 非常感谢所有帮助。提前致谢!
更新:
在控制台中进行一些实验:
我可以访问 template
、driver
和 source
。调用template(driver)
returns右边HTML,但是网站没有更新。
可能没说清楚,我本地开发环境用的是Grunt,Handlebars是用Bower安装的。 Gruntfile 由 Yeoman 制作。
我在 this JSFiddle 的最后一行找到了我的解决方案。我给出了模板是 ID 的标签,并使用了:
$('#tagIDName').append(template(driver));
而不只是 template(driver);