Question

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

我想要做的是将视觉设计和javascript分开，以便我可以在不触及JS方面的情况下改变设计方面。这只适用于设计保持大致相同的情况（我希望将其用于快速原型设计）

这是一个例子。

<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都将被执行。因此，如果您有一个清除恶意内容输入的功能，您可以在这些<% %>代码中调用它。

Answer 2

抓住它，对其进行字符串替换，然后将其放在页面中的正确位置。

字符串替换？如果它在页面中，那么你已经有了一个DOM节点。没有必要将您的节点序列化为HTML字符串，将其破解并将其重新解析为DOM节点。这种方式就是疯狂和跨站点脚本安全漏洞，因为你忘了逃避HTML的文本。

相反，使用cloneNode获取DOM对象的副本，更改所需的位，并将其添加到文档中。

<style type="text/css">
    .hidden { display: none; }
</style>

<table id="sometable">
    <tr class="hidden"><td>-</td><td>-</td><td>delete row</td></tr>
</table>
<input type="button" id="sometable-newrow" value="New row"/>

<script type="text/javascript">
    var recordn= 1;

    document.getElementById('sometable-newrow').onclick= function() {
        var table= document.getElementById('sometable');
        var tr= table.rows[0].cloneNode(true);

        tr.className= ''; // remove hiddenness
        tr.cells[0].firstChild.data= 'record-'+recordn;
        tr.cells[1].firstChild.data= 'I am line '+recordn;
        tr.cells[2].onclick= removeRow;

        table.rows[table.rows.length-1].parentNode.appendChild(tr);
        recordn++;
    };

    function removeRow() {
        var tr= this.parentNode;
        tr.parentNode.removeChild(tr);
    }
</script>

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

2 个答案: