jquery - 从 underscore.js 模板到 DOM 元素

Question

现在我正在使用以下代码行来检索下划线模板并使用 jQuery 从模板中创建一个 DOM 元素。

var element = $(_.template($('#template').html())());

它有效，但我认为这看起来有点混乱/混乱，所以我想知道是否有更好的方法来做到这一点？

Answer 1

为 Underscore 1.7+ 更新：在较新版本的 Underscore 中，您确实不能做得更好，因为_.template总是返回一个函数：

模板 _.template(templateString, [settings])
将 JavaScript 模板编译成可以评估渲染的函数。

您过去可以说_.template(tmpl, data)（见下文）获得一个填写好的模板，但现在不行了。

但是，您可以使用以下内容隐藏函数内的一些括号：

var tmpl_to_html = function(id) {
    var $el = $('#' + id);
    var fn  = _.template($el.html());
    return fn();
};
var $e = $(tmpl_to_html('template'));

或者：

var tmpl_to_html = function(id, data) {
    var $el = $('#' + id);
    var fn  = _.template($el.html());
    return fn(data);
};
var $e = $(tmpl_to_html('template'));
var $x = $(tmpl_to_html('other', { a: 'b' }));

---

对于旧版本的下划线：_.template您可以通过提供data参数来获取填充的模板：

template _.template(templateString, [data], [settings])
[...]
如果您正在编写一次性的，您可以将数据对象作为第二个参数传递给模板，以便立即呈现而不是返回模板函数。

任何真实的东西都可能会到期，data但一个空的对象可能是你最好的选择：

var $e = $(_.template($('#template').html(), { }));

这仍然有点吵，但您总是可以将_.template调用包装在另一个函数中：

var tmpl_to_html = function(id) {
    var $el = $('#' + id);
    return _.template($el.html(), { });
};
var $e = $(tmpl_to_html('template'));

如何将其分解为功能取决于您的偏好，您将在其他地方使用哪些部分。