В JQuery, как я могу держать HTML OUT моего JavaScript? - PullRequest
Новая
       32

В JQuery, как я могу держать HTML OUT моего JavaScript?

2 голосов
/ 21 января 2012

Я думаю, что 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); 
}

Несколько лет назад я придумал решение, которое почти хорошо работает, и я часто им пользуюсь, но мне все еще хотелось бы увидеть что-то лучшее, в этом и заключается мой вопрос. Моя текущая стратегия состоит в том, чтобы создать скрытый div в нижней части основного файла HTML. Например: 

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

Хорошо, одна вещь, которую вы замечаете, что отстой в моем решении, является несколько более многословной, но, честно говоря, кажется, что она сияет, если ваш шаблон имеет какую-то сложность. Хорошим кандидатом на шаблон является HTML с 5 или более строками. Еще одна вещь в его пользу - он делает работу по извлечению HTML из Javascript. Теперь я могу позволить своему HTML-дизайнеру редактировать HTML-код в div скрытого шаблона, а также изменять его внешний вид и помещать классы по своему усмотрению (его легко научить шаблонам и тому, что они делают), и теперь он этого не делает. не нужно трогать Javascript. Однако в последнее время у меня возникли проблемы с определением целых таблиц в качестве шаблона. Когда JQuery читает шаблон, он пытается переосмыслить код таблицы и испортит его.

Ответы [ 2 ]

2 голосов
/ 21 января 2012

jQuery предоставляет синтаксис, в котором вы можете указать атрибуты во время создания элемента.Это должно обеспечить чистый вид, который вы хотите.

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

Возможно, вы также захотите сохранить атрибуты x / y на плате в объекте данных, а не встраивать в id.Ваш код:

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);
1 голос
/ 21 января 2012

try jsRender , jsViews или jQuery шаблоны

Это шаблонные решения, которые хорошо разделяют JavaScript и HTML.Я сам использую шаблоны jQuery и считаю, что это значительно экономит время, так как мне не нужно беспокоиться о HTML внутри JavaScript, а мой код буквально на 80% меньше из-за отсутствия HTML.Код также намного проще.Просто потратьте несколько минут, чтобы проверить шаблоны.Оно того стоит.

Обратите внимание, что шаблоны jQuery отбрасываются для jsRender и jsViews, но шаблоны jQuery пока работают очень хорошо для того, что вам нужно сделать, и переход к jsRender или jsViews будет простым с точки зрения концепций, не так много изменений с точки зрения понимания и синтаксиса.

...