從underscore.js模板到DOM元素

Question

現在，我正在使用以下代碼行來檢索Underscore模板，並使用jQuery從模板創建DOM元素。

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

它的工作，但我認爲這看起來有點混亂/混亂，所以我想知道是否有更好的方法來做到這一點？

Answer 1

更新了下劃線1.7+：這確實不是更好，你可以在下劃線的新版本做，因爲_.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' })); 

---

對於舊版本下劃線：你可以得到通過提供data參數從_.template填充模板：

模板_.template(templateString, [data], [settings])
[...]
如果你正在寫一個一次性的，你可以在數據對象作爲第二個參數傳遞給模板，以便立即呈現，而不是返回一個模板函數。

任何truthy將可能是由於對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')); 

如何將它打入功能取決於您的偏好您將在別處使用哪些部件。