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

わかりました、私のソリューションで気に入らない点の 1 つは、かなり冗長ですが、公平を期すために、テンプレートが何らかの複雑さを持っている場合は、それが際立っているように見えます。テンプレートの良い候補は、5 行以上の HTML です。それが有利なもう 1 つの点は、Javascript から HTML を取り出す役割を果たしていることです。これで、HTML デザイナーに隠しテンプレート 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 に答える