使用JavaScript的模板字符串

Question

我正在编写一个带有客户端JS的应用程序,我用它来合理地更新DOM.

事情就是这样做:

$('#id').html('<div class="' + class + '">' + content + '</div>');

多次将HTML随意放在JavaScript周围并不是非常漂亮且难以维护.

是否有一个类似于(或替代解决方案)的Lithium处理它的视图助手的方式.

看到:

• http://li3.me/docs/lithium/template/Helper::_render()
• http://li3.me/docs/lithium/util/String::insert()

举些例子.

基本上在PHP版本中,您将创建一个公共字符串的关联数组和一个简单的替换方法,以使用相同名称的变量替换这些字符串的某些标记部分.

另一个愚蠢的例子(伪代码:)

var strings = {
    'div': '<div {:attr}>{:content}</div>'
};
console.log(render('div', {id: 'newElem'}, 'Hello, World!'));
// Output: <div id="newElem">Hello, World!</div>

如果你有更好的建议来处理如何处理在JavaScript中存储HTML并使其无法遍及整个地方,那么我非常希望听到它.

Answer 1

是的,使用jQuery模板或Underscore模板 (我最喜欢的)或任何其他JS模板引擎.

另外,请查看此问题以获得有关模板引擎性能的讨论:提高jQuery模板性能

Answer 2

jQuery 鼓励您动态构建 DOM 节点，而不是进行字符串连接：

$("#id").html(
    $("<div />").addClass(class).text(content))

一般来说，您可以使用jQuery 属性方法来构造此类节点，并且其中许多方法都可以按照您的意愿进行映射。例如：

$("#id").append(
    $("<div />")
        .attr({id: "newElem"})
        .css({width: "100%", color: "red"}))