組織車把文件

Question

在這個簡單的例子中...

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

...我嘗試擁有一個Handlebars模板，並將其內容填充到單獨的文件中，而不是將模板包含在HTML內，而將js對象的內容對象包含在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);

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

這里的示例代碼