Question

我使用jQuery模板插件将单独的html文件呈现为模板。我的一个模板看起来像这样：

<div class="row">
    <div class="span4">
        test1
    </div>
    <div class="span4">
        test2
    </div>
    <div class="span4">
       test3
    </div>
</div>

出于测试目的，我实际上还没有呈现任何数据。

当我用firebug调试时，我可以看到我的ajax调用获取正确的html（与上面完全一样）。然后我使用json对象（存储在名为data的var中）来填充我检索到的模板（存储在名为template的var中），如下所示：

$.tmpl(template, data).appendTo('#person-item-placeholder');

生成的html（由firebug检查）是这样的（注意缺少的div元素）

<div id="person-item-placeholder">
    <div class="span4">test1‌</div>
    <div class="span4">‌test2‌</div>
    <div class="span4">test3‌</div>
</div>

如何阻止模板插件删除该元素？

Answer 1

jQuery.tmpl文档在这方面有点模糊

从表面上看，您尝试过的方法应该有效，但其中一个模板参数选项为：

模板参数可以是......一个HTML元素（或jQuery对象包装一个元素，其内容将用作模板。

这里的关键词是＆＃34;内容＆＃34;，换句话说，虽然它没有说在传递字符串时会发生这种情况但丢弃了包装器。忽略这一点，症状完全如问题所述。

一种可能的解决方案是将模板预先包装在虚拟容器中，例如div。

如果我是对的，那么这应该有效：

$.tmpl('<div>+'template+'</div>', data).appendTo('#person-item-placeholder');

或者也许：

$.tmpl($(template).wrap('<div/>'), data).appendTo('#person-item-placeholder');

Answer 2

请仔细阅读jquery template doc这个页面上的例子，你错过了另一个......

同时检查是否有任何缺失的标签......必须引起它...其他一切似乎都没问题......仍然用示例进行交叉检查

jQuery Templates Plugin在编译之前删除外部div标签

2 个答案: