Question

我有一段从Javascript函数返回的模板HTML：

function getTemplate() {
    return '<li id="element_idx_" class="elementChoice">' +
           '  <a href="#" onclick="_clickScript_" tabindex="27" title="_toolTip_">' + 
           '    <span id="element_idx_title">_elementDisplayText_</span>' + 
           '    <div class="elementIcon" id="element_idx_image"></div>' +
           '    <div class="actionIcon" id="element_idx_Icon"></div>' +
           '  </a>' +
           '</li>';
}

子串_idx_，_clickScript_等使用从AJAX调用中检索的数据替换，使用的定义类似于：

function interpolate(template, replacements) {
    // * template is the HTML listed above
    // * replacements is a JavaScript object, where the property names map to 
    //   the substitution strings in the HTML template.
    // 
    // E.g., { idx: 4, clickScript: function() { // click }, displayName: foo }
}

如您所见，某些项目在模板中被多次替换（即_idx_）。

webapp已经广泛使用jQuery，所以我想知道是否有更多的jQuery方式实现这一点，可能使用DOM，而不是依赖于字符串操作。

有什么想法吗？

Answer 1

John Resig博客写了关于将这样的模板放入脚本块的文章：

<script id='template1' type='text/html'>
  <li id='element_idx' ...
    ...
  </li>
</script>

浏览器不会尝试解释这些，但您可以获取文本：

var template = $('#template1').text();

这比把你的模板放在这样的Javascript中要干净一些，但它并非没有问题。将模板与代码分开可能会有点痛苦或尴尬，具体取决于您的设置。

Answer 2

自从您使用DOM操作（例如element_idx_Icon）难以覆盖的地方替换这些字符串后就没有了。

如何在jQuery中将文本替换为HTML？

2 个答案: