在JQuery中，我怎樣才能保持我的JavaScript的HTML？

我認爲JQuery是偉大的，但我也喜歡將HTML保存在HTML文檔中的想法，而且幾乎沒有任何JavaScript。我是什麼意思？你知道，比如說你正在創建一個有很多行或者可變數量的行的動態表。這正是我不想做的事：在JQuery中，我怎樣才能保持我的JavaScript的HTML？

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); 
}

OK，有一件事你注意到吮吸我的解決方案是相當多的冗長，但公平地說，它如果你的模板有任何複雜性，它似乎都會發光。一個模板的好候選者是具有5行或更多行的HTML。另一件有利於它的工作是從HTML中獲取HTML。現在，我可以讓我的HTML設計師在隱藏模板div中編輯HTML，並根據需要更改它的外觀並放入類（很容易教他關於模板以及它們的作用），所以現在他不會「不得不觸摸Javascript。然而，最近我遇到了將整個表定義爲模板的一些問題。當JQuery讀取模板時，它會嘗試重新解釋表代碼並將其解決。

來源

2012-01-21 Strat-O

我覺得第一個解決方案更容易使用。它不會讓它們分開，它會讓它們優美地交織在一起。如果您有一個生成HTML的腳本，請將其保留。沒有一半的HTML預生成，另一半生成。 – Blender

有許多現有的客戶端模板解決方案，如[Handlebars]（http://handlebarsjs.com/），[Moustache]（http://mustache.github.com/）和[EJS]（http： /embeddedjs.com/）。 –

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-21 05:46:37 mrtsherman

嘗試jsRender，jsViews或jQuery templates

這些都是模板化的解決方案，分離JavaScript和HTML相當不錯。我自己使用jQuery模板，並且我發現它非常節省時間，因爲我不必擔心JavaScript內部的HTML，而且我的代碼在沒有HTML的情況下字面上可以縮小80％。代碼也更容易。花點時間檢查模板。它非常值得。

請注意，jQuery模板正在放棄jsRender和jsViews，但jQuery模板現在工作得非常好，因爲您需要做的事情以及向jsRender或jsViews的轉變將在概念方面變得簡單，而對於理解和語法。

來源

2012-01-21 06:01:39

在JQuery中，我怎樣才能保持我的JavaScript的HTML？

回答

相關問題