【问题标题】:Handlebars does not output anything车把不输出任何东西
【发布时间】:2015-06-20 10:39:39
【问题描述】:

在文件的开头我定义了 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 等,但它不会改变任何东西。

希望这不仅仅是我错过了一些重要的东西,但很可能是这样。 非常感谢所有帮助。提前致谢!

更新: 在控制台中进行一些实验: 我可以访问templatedriversource。对template(driver) 的调用会返回正确的HTML,但网站并未更新。

可能不太清楚,但是我使用 Grunt 做本地开发环境,Handlebars 是和 Bower 一起安装的。 Gruntfile 由 Yeoman 制作。

【问题讨论】:

  • 是不是因为加载bootstrap.js的那一行缺少&gt;
  • 对不起,这是我的问题中的一个错字。固定的。谢谢!

标签: javascript gruntjs handlebars.js yeoman bower


【解决方案1】:

我在this JSFiddle 的最后一行找到了我的解决方案。我给了模板是ID的标签,并使用了:

$('#tagIDName').append(template(driver));

而不仅仅是template(driver);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-10-31
    • 1970-01-01
    • 2022-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-09
    相关资源
    最近更新 更多