Question

现在我正在使用以下代码行来检索Underscore模板，并使用jQuery从模板创建DOM元素。

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

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

Answer 1

针对Underscore 1.7 +进行了更新：由于_.template总是返回一个函数，因此在较新版本的Underscore中你可以做得更好：

模板 _.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(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'));

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

从underscore.js模板到DOM元素

1 个答案: