Question

假设我有一个以HTML格式保存的模板并使用标准的下划线语法。

我的理解是我可以使用jQuery获取模板：

var html = $('#item-foo').html()

从那里我可以使用

进行插值

var interpolated = _.template(html, {prop: "and_values"});

要在JavaScript中创建DOM元素，我可以使用此实用程序函数

// converts HTML string to DOM object
Pub.HTMLToElement = function (html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    return div.firstChild;
};

var element = HTMLToElement(interpolated);

最后我在JavaScript中使用了我的元素，这些元素都以HTML中的模板开头。

这是最好的方法吗？

这似乎很长，所以我只想验证。

Answer 1

这有点简单，你已经在使用jQuery了：

HTML：

<script id="template" type="text/template">
Hello <%=name%>, how are you?
</script>
<div id="container" />

JS：

var str=$('#template').html();
var interpolated = _.template(str, {name: "pizza"});
$('#container').append($('<div/>').html(interpolated));

JSFiddle：http://jsfiddle.net/QAT4n/

Answer 2

如果您使用的是jQuery，jQuery会自动将HTML转换为元素。这将是一个更短的方式：

var element = $(interpolated).get(0);

请参阅http://api.jquery.com/get/和http://api.jquery.com/jQuery/#jQuery2

所以整个过程都是这样的：

var html = $('#item-foo').html()
var interpolated = _.template(html, {prop: "and_values"});
var element = $(interpolated).get(0);

可以清理到这个：

var interpolated = _.template(
        $('#item-foo').html()
        , {
            prop: "and_values"
        });
var element = $(interpolated).get(0);

如何从模板创建DOM元素？

2 个答案: