JQuery - жесткое кодирование HTML в Javascript - есть ли лучший способ динамически создавать элементы dom?

Question

У меня много сообщений и сырой HTML, который я жестко кодирую в своем коде JavaScript, например:

    var subjectId = $(subject).attr('subjectId'); 
    var subjectName = $(subject).attr('subjectName'); 
    var html = "<table id='invitations' class='invitations' width='100%'><tbody>";
    $(subject).find('group').each( function() {     
        var groupId = $(this).attr('groupId');
        var groupName = $(this).attr('groupName');
        var ownerId = $(this).attr('ownerId');
        var owner = findStudentNameById( subjectId, ownerId );
        html += "<tr>" +
                    "<td width='55px'><img src='images/gplg.png' /></td>" +
                    "<td>" + subjectId + " <span class='subjectName'>" + subjectName + '</span> <br /> '  + groupId + 
                    " - <span class='group'>" + groupName + "</span><br /> Created By "  + owner + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td width='55px'></td>" +
                    "<td><img class='accept' src='images/accept.png' />" +
                        "<img class='decline' src='images/decline.png' /> " +
                    "</td>" +
                "</tr>";                    
    });
    html += "</tbody></table>";
    return html;

или ...

$('#inviteform').submit( function (){
            var invitesSent = false;
            var html = '<h3>Invitations have been sent to the following people</h3><br /><ul>';
            $('#inviteform').find('input:checkbox').each( function() {
                if ( $(this).is(':checked')){
                    html += '<li>+ <a href="#">' + $(this).val() +'</a></li>';
                    invitesSent = true;
                }
            });
            html += '</ul>';

            if ( !invitesSent ){
                html = '<h3>You did not select any invitees, no invitations have been sent.</h3>';
            }

            $('#content').hide().fadeOut(2000);
            $('#content').html(html).slideDown("slow");
            $('#slogan').html('Congratulations! Your group is now complete. ').fadeIn(2000);

            return false;
        });

Это потому, что у меня есть 2 основных области страницы (т.е. div заголовка и div контента), которые мне нужно изменить на лету. К сожалению, я не могу разделить этот контент на разные файлы.

Итак, есть ли лучшие практики для создания текста и элементов DOM для этих элементов вместо жесткого кодирования такого большого количества вещей.

Я ищу самое элегантное решение, поэтому у меня не так много сложного кодирования.

Спасибо

Answer 1

То, как он поощряет вас жестко кодировать строки HTML, является одной из моих любимых ненавистей с jQuery.

Обычно я просто использую стандартный Javascript: document.createElement('TD')

Если вы создаете много узлов одного типа, лучше / быстрее их кэшировать и использовать cloneNode(true) для создания новых узлов:

var nodeCache;
    nodeCache.td = document.createElement('TD')

var newTD = nodeCache.td.cloneNode(true);

Я понимаю, что jQuery не очень широко используется, но я думаю, что jQuery не справляется с этим.

Answer 2

Вы должны взглянуть на библиотеку шаблонов. jQuery шаблонизаторы

Answer 3

Одной из альтернатив является использование append (), addClass (), css (), attrib () и других методов jQuery для создания DOM. Цепочка сделает код более элегантным. Это будет хорошо работать, особенно для небольших деревьев DOM.

Если вам нужны большие DOM-деревья, то было бы лучше использовать AJAX-методы для их извлечения с сервера. Вам нужно будет адаптировать свой код для передачи динамически генерируемых данных.

Кроме того, вы можете рассмотреть возможность изменения вашего HTML и JavaScript-кода. Например, вы можете поместить дерево DOM в html и скрыть его (используя CSS или javascript). Затем вы можете показать это после добавления динамически сгенерированных данных. Это намного лучше с точки зрения разделения интересов.

Answer 4

Вы можете использовать селектор jQuery для создания элементов DOM. Например,

$('<table>')

Создает элемент таблицы, в который затем можно установить атрибуты и затем добавить в DOM.

$('<table id="invitations" class="invitations" width="100%">')
    .append('<tbody>')
    .appendTo(selector);
    // etc

Answer 5

В вашем случае я бы отделил сообщения от разметки. У вас может быть пустой html-шаблон на вашей странице, например

...<div id="feedback" style="display:none;"><h3 class="headline"></h3><p class="message"></p>...

, а затем заполните его с помощью jQuery. Таким образом, вы можете реорганизовать все ваши пользовательские сообщения во внешний файл .js, который значительно облегчит i18n.

Кстати, я не могу рекомендовать JQuery Template Engines. Либо они заставляют вас использовать очень неудобный синтаксис (например, jTemplates), либо они ограничивают вас простым клонированием элементов. ИМХО, вам почти всегда лучше использовать метод .clone ().

Answer 6

Было бы лучше использовать Ajax для вызова пользовательских элементов управления.

Таким образом, вы можете сделать всю разметку в HTML-элементе управления.

По моему скромному мнению.

Answer 7

Попробуйте загрузить html через ajax.

Это разделит JavaScript и HTML, нарушая зависимости.