2

我认为 JQuery 很棒，但我也喜欢将 HTML 保留在 HTML 文档中而几乎没有保留在 javascript 中的想法。我是什么意思？您知道，假设您正在创建一个包含许多行或可变行数的动态表。这正是我不想做的：

function initBoard(symbol) {
    for (var i=0;i<30;i++) {
        myBoard += "<tr>";
        enemyBoard += "<tr>";
        for (var j=0;j<60;j++) {
            myBoard += '<td bgcolor="#0000ff" id="my_sqr_'+i+'_'+j+'">'+symbol+</td>';
            enemyBoard += '<td bgcolor="#ff0000" id="enemy_sqr_'+i+'_'+j+'">'+symbol+'</td>';
        }
        myBoard += "</tr>";
        enemyBoard += "</tr>"
    }
    $("#my-board").html(myBoard);
    $("#enemy-board").html(enemyBoard); 
}

几年前，我想出了一个几乎效果很好的解决方案，并且我经常使用它，但我仍然希望看到更好的东西，这就是我的问题所在。我目前的策略是在主 HTML 文件的底部创建一个隐藏的 div。例如：

<div class="hidden-templates" style="visibility:hidden;">
    <div id="board-line-tpl">
        <td bgcolor="--bg-color--" id="--side--_sqr_--index1--_--index2--">--symbol--</td>
    </div>
</div>

然后将javascript更改为如下内容：

function initBoard(symbol) {
    for (var i=0;i<30;i++) {
        myBoard += "<tr>";
        enemyBoard += "<tr>";
        for (var j=0;j<60;j++) {
                    // Get the template
            myBoardLine = $("#board-line-tpl").html();
                    // substitue the template's"variables" with unique data
                    myBoardLine.replace(/--side--/, "my");
                    myBoardLine.replace(/--bg-color--/, "#0000ff");
                    myBoardLine.replace(/--index1--/, i);
                    myBoardLine.replace(/--index2--/, j);
                    myBoardLine.replace(/--symbol--/, symbol);
                    myBoard += myBoardLine;
                    // You get the idea.  I'll leave this line as is.
            enemyBoard += '<td bgcolor="#ff0000" id="enemy_sqr_'+i+'_'+j+'"></td>';
        }
        myBoard += "</tr>";
        enemyBoard += "</tr>"
    }
    $("#my-board").html(myBoard);
    $("#enemy-board").html(enemyBoard); 
}

好的，你注意到我的解决方案很糟糕的一件事是相当冗长，但公平地说，如果你的模板有任何复杂性，它似乎确实会发光。一个很好的模板候选者是具有 5 行或更多行的 HTML。对它有利的另一件事是它确实完成了从 Javascript 中获取 HTML 的工作。现在我可以让我的 HTML 设计师在 hidden-template div 中编辑 HTML，改变它的外观并根据需要放入类（很容易教他模板和它们的作用），所以现在他没有不必接触 Javascript。但是，最近我在将整个表格定义为模板时遇到了一些问题。当 JQuery 读取模板时，它会尝试重新解释表代码，但它搞砸了。

4

2 回答 2

2

jQuery 提供了一种语法，您可以在其中指定元素创建时的属性。这应该提供您想要的干净外观。

$('<tr />', {
    id: 'foo',
    class: 'row'        
});

您可能还想研究将板 x/y 属性存储在数据对象中，而不是嵌入在 id 中。

$('<tr />').data('x', xval); //set data property
var xval = $(element).data('x');

这是基于您的代码的示例：

http://jsfiddle.net/YAHDK/

var $table = $('<table />');    

for (var i = 0; i < 30; i++) {
    var $row = $('<tr />');

    for (var j=0;j<60;j++) { 
        var $td =($('<td />', {
            id: i + '_' + j,
            bgcolor: '#0000ff',
            text: i
        }));
        $row.append($td);      
    }

    $table.append($row);
}


$('body').append($table);
于 2012-01-21T05:46:37.517 回答
1

尝试jsRender、 jsViews 或jQuery 模板

这些是很好地分离 JavaScript 和 HTML 的模板化解决方案。我自己使用 jQuery 模板，我发现它可以节省大量时间，因为我不必担心 JavaScript 中的 HTML，而且我的代码在没有 HTML 的情况下实际上要小 80%。代码也更容易。只需花一些时间检查模板。它非常值得。

请注意，对于 jsRender 和 jsViews 已经放弃了 jQuery 模板，但 jQuery 模板现在非常适合您需要做的事情，并且在概念方面迁移到 jsRender 或 jsViews 将很简单，在理解和语法方面没有太大变化。

于 2012-01-21T06:01:39.333 回答