组织Handlebars文件

Organizing Handlebars files

本文关键字：文件 Handlebars 组织      更新时间：2023-09-26

在这个简单的例子中。。。

http://plnkr.co/edit/78ObAiirrSFPcvyiBKqn

我尝试有一个Handlebars模板和应该将其填充到单独文件中的内容，而不是像另一个例子中那样将模板放在HTML中，将内容对象放在js脚本中：

http://embed.plnkr.co/KXdVgedRA8K95S17peuH/

我还发现了这个帖子，这个家伙的意思和我一样（对吧？）：

使用Handlebars.js（jQuery Mobile环境）预编译模板

我试过了（接受的答案是什么，请参阅下面的代码），但它不起作用。我得到"未定义不是函数"。

另一方面，这个答案有90票赞成，所以我一定在某个地方遗漏了什么。有人能告诉我吗？

另一个相关的问题是：我应该使用AJAX加载本地文件吗？

index.html

<script src="cities.tmpl.js"></script> <!-- compiled template -->
<script src="content.js"></script>
<script src="script.js"></script>

script.js

var template = Handlebars.templates['cities.tmpl']; // your template minus the .js
var context  = data_pr.all(); // your data
var html     = template(context);

解决了它，基于这篇文章：

http://www.jblotus.com/2011/05/24/keeping-your-handlebars-js-templates-organized/

我做了一点改动，这样更容易阅读（至少对我来说）：

function getTemplate(path, callback) {
    $.ajax({
        url: path,
            success: function(data) {
                var template = Handlebars.compile(data);     
                if (callback) callback(template);
        }
    });
}
getTemplate('cities.tmpl', function(template) {
    var html = template(data_pr); // data_pr = my data from content.js
    document.getElementById('cities-placeholder').innerHTML = html;
});

此处的示例代码

相关文章：