在 $.tmpl 函数的返回对象上调用 html() 函数

【问题标题】：Call html() function on $.tmpl function's return object在 $.tmpl 函数的返回对象上调用 html() 函数
【发布时间】：2016-04-12 01:18:11
【问题描述】：

Plunker 代码是here。

我正在尝试从 jquery 模板及其数据中获取 html 内容。 tmpl的返回类型不是jquery包装的对象吗？

这段代码，

$.each($('#movieTemplate').tmpl(movies), function(idx,elt){
  tmplContent = tmplContent + elt.html()
  });

抛出错误

elt.html is not a function

注意：我可以使用 plunker 中所示的替代方式使其工作

但我想弄清楚 $.tmpl 的返回值的对象类型？

【问题讨论】：

标签： jquery jquery-templates

【解决方案1】：

使用document.createElement 创建一个 html 容器，而不是将 html 连接为字符串，而是附加 html

var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
]

var tmplContent = $("<div />").append($.tmpl('  <li>    <b>${Name}</b> (${ReleaseYear})  </li>', movies)).html()
$('#results-0').html(tmplContent)

var tmplContent = document.createElement('div');
$.each($('#movieTemplate').tmpl(movies), function(idx,elt){
    tmplContent.appendChild(elt);
    //tmplContent = tmplContent + elt.toString()
});

$('#results-1').html(tmplContent)

或者如果你还想用它作为字符串，你可以这样做

$.each($('#movieTemplate').tmpl(movies), function(idx,elt){
    tmplContent = tmplContent + $(elt).prop('outerHTML');
});

【讨论】：