Question

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

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

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

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

我也发现这篇帖子里的这个人跟我一样（对吗？）：

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

我试过了（接受的答案是什么，请参阅下面的代码），但它不起作用。我得到＆＃34; undefined不是函数＆＃34;。

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

Answer 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

组织Handlebars文件

1 个答案: