jquery - 在 _.template 中加载一个 html 文件

Question

我正在尝试使用 underscore.template 通过 jQuery.get以这种方式加载 html 来编译 JavaScript 模板：

_.template($.get('my_template.html'), $get(function(data) { 
    return data;
}));

但我收到以下消息

TypeError: Object #<Object> has no method 'replace'

有什么提示吗？

Answer 1

$.get不像你想象的那样工作。$.get('my_template.html')不返回my_template.html，它返回一个jqXHR，你得到的东西被传递给$.get回调：

$.get('my_template.html', function(html) {
    // my_template.html will be in `html` here.
});

所以如果你真的想用它$.get来检索你的模板，你将不得不等待 AJAX 调用从服务器返回一些东西，而这要等到以后才会发生。您可以使用以下async选项发出同步 AJAX 请求$.ajax：

async (default: true)
类型：Boolean
默认情况下，所有请求都是异步发送的（即true默认设置为）。如果您需要同步请求，请将此选项设置为 false。[...] 请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

看起来像这样：

var tmpl;
$.ajax({
    url: 'my_template.html',
    type: 'get',
    async: false,
    success: function(html) {
        tmpl = html;
    }
});
var t = _.template(tmpl);
// `t` is now your compiled template function

不过我不建议这样async:false做，这对您的用户来说是一件令人讨厌的事情，并且使用它会使人们认为您的应用程序已锁定或崩溃。

我会找到一种不同的方式来加载您的模板。将它们全部放入<script>元素中，以便它们始终可用，或者将它们与任何 JavaScript 将使用它们一起交付。