组织把手文件答案

【问题标题】：Organizing Handlebars files组织把手文件
【发布时间】：2014-10-13 19:36:03
【问题描述】：

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

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

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

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

我还发现了这篇文章，这个人的意思和我一样（对吗？）：

Using pre-compiled templates with Handlebars.js (jQuery Mobile environment)

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

另一方面，这个答案有 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);

【问题讨论】：

标签： javascript jquery json templates handlebars.js

【解决方案1】：

根据这篇文章解决了：

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;
});

sample code here

【讨论】：