javascript - 通过javascript动态添加html时分离Javascript和Html

Question

我目前正在为列表应用程序构建一个非常动态的表，它基本上将通过 AJAX 执行基本的 CRUD 功能。

我想做的是将视觉设计和 javascript 分开，这样我就可以在不接触 JS 端的情况下更改设计端。这只适用于设计大致相同的情况(我想用它来快速制作原型(prototype))

这是一个例子。

<table>
<tr><td>record-123</td><td>I am line 123</td><td>delete row</td></tr>
<tr><td>record-124</td><td>I am line 124</td><td>delete row</td></tr>
<tr><td>record-125</td><td>I am line 125</td><td>delete row</td></tr>
<tr><td>add new record</td></tr>
</table>

现在，当我添加一条新记录时，我想插入一行新的 html，但我不想将此 html 放入 javascript 文件中。

我正在考虑在页面上靠近表格的位置创建这样一行。

<tr style='visble:none;' id='template-row'><td>record-id</td><td>content-area</td><td>delete row</td></tr>

当我要添加新行时，我在页面中搜索带有 id=template-row 的标签，然后抓取它，对其进行字符串替换，然后将其放在正确的位置页面。

只要设计没有发生根本性的变化，并且我保持占位符字符串不变，这意味着可以在不接触 js 的情况下快速修改设计。

任何人都可以就这样的方法提出任何建议吗？

Answer 1

看看John Resig's Micro-Templating .

使用:

<script type="text/html" id="row_tmpl">
    <tr><td><%=id%></td><td><%=content%></td><td>delete row</td></tr>
</script>

<script type="text/javascript" src="templating.js"></script>
<script type="text/javascript">
    (function(){
       var dataObject = {"id":"myid","content":"some content"};
       var html = tmpl("row_tmpl", dataObject);
       // do whatever you want with the new HTML...
    }());
</script>

---

注意事项
由于一些 SO 用户理所当然地担心使用这种方法的 XSS 攻击，我只想指出微模板功能提供了规避问题的方法。 <% %> 中的任何 javascript标签将被执行。因此，如果您有清除恶意内容输入的功能，您可以在这些 <% %> 中调用它标签。