如何避免在javascript中编写HTML标记

Question

在我的应用程序中，我有时需要动态创建元素，所以我在javascript中创建它们，但它使维护变得困难。

例如：

上面的图片是我点击地图中的一个点时的信息窗口，在我们的应用程序中我们有类似的要求，我们使用javascript来创建整个DOM。

我认为这不是一个好主意，有什么建议吗？

Answer 1

您可以将JS生成的HTML提取到客户端实例化的模板中。查看JQuery模板，例如：

http://api.jquery.com/category/plugins/templates/

示例：

<ul id="movieList"></ul>

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];

    // Render the template with the movies data and insert
    // the rendered HTML under the "movieList" element
    $( "#movieTemplate" ).tmpl( movies )
        .appendTo( "#movieList" );
</script>

Answer 2

使用普通jQuery的另一种方法（我不知道Prototype，但我猜你可以做同样的事情）：

模板：

<div id="template" style="display: none">
    Hello, <span class="name">[world]</span>
</</div>

渲染：

function render(name) {
    $('#template').clone().removeAttr('id')
        .find('.name').text(name).end()
        .appendTo('body').show();
    }

render("Stack Overflow");
render("..and world");

这个想法非常简单：将模板隐藏在HTML中。当你需要它时，通过id找到它，删除这个id，替换数据并将新创建的元素添加到你想要的位置。

Answer 3

你说过你正在使用Prototype。你可以使用它的Template class。您甚至可以在服务器上存储模板，并根据需要通过ajax加载它们（尽管我担心HTTP请求的数量），以保持代码和标记完全不同。

例如，这是一个用于构建表格行的Prototype模板：

<tr><td>#{name}</td><td>#{description}</td></tr>

您可以选择存储模板文本的位置和方式：

• 你可以把它放在你自己的文件中，你需要通过Ajax加载，虽然如果有很多它可能会开始过多的HTTP请求。
• 你可以把它们放在你的JavaScript中，但是你已经将你的标记绑定到了JavaScript上，我得到了你不想这样做的印象。
• 您可以使用display: none将它们包含在主页中，将其作为HTML提取，然后重复使用。

在所有这三种情况中，最终你得到一个包含模板文本的字符串，例如：

var rowString = "<tr><td>#{name}</td><td>#{description}</td></tr>";

（但同样，您可能不需要将它实际放在JavaScript中。）

从字符串中，您可以制作模板：

var rowTemplate = new Template(rowString);

然后使用它：

$('tableBodyId').insert({
    bottom: rowTemplate.evaluate({
        name:        bizobject.name.escapeHTML(),
        description: bizobject.description.escapeHTML()
    })
});

请注意（遗憾的是）您必须自己进行HTML转义（因为Prototype的模板不是专门与HTML绑定的，您可以在任何有模板化字符串的情况下使用它们）。或者你可以对Template类做一个相当小的改动来为你做（这就是我做的，当我使用Prototype时;我实际上可以在模板项上调用函数）。