jQuery table row builder

Question

Существует метод maintanble для построения DOM с jQuery? Посмотрите на метод дописывания этого кода ...

$.getJSON("api/test", function(data) { 
    $.each(data, function() { 
     $("#tests").append($('<tr><td><input type="radio" name="' + this["name"] + '"/><td>' + this["name"] + '</td><td>' + this["descr"] + '</td></tr>')); 
    }); 
}); 

Я думаю, (или, по крайней мере, я надеюсь), что есть лучший путь. Можете ли вы реорганизовать это, чтобы быть более разборчивым?

Answer 1

Посмотрите на шаблон плагина.

http://plugins.jquery.com/project/jquerytemplate

Ваш код может выглядеть так,

$.getJSON("api/test", 
    function(data) 
    { 
     var t = $.template('<tr><td><input type="radio" name="{name}"/><td>{name}</td><td>{descr}</td></tr>'); 
     $.each(data, function() 
     { 
      $("#tests").append(t, this); 
     } 
    } 
); 

EDIT

Как RedSquare правильно указывает, если у вас есть большое количество строк, делая манипуляции DOM в каждой итерации может быть очень медленным. Не изменяйте свой код, если вы не профилировали свой код и не обнаружили, что этот конкретный цикл является узким местом.

Если я одолжить 'string.Format' method from this post, вы можете сделать что-то вроде

$.getJSON("api/test", 
    function(data) 
    { 
     var template = '<tr><td><input type="radio" name="{name}"/><td>{descr}</td><td>{1}</td></tr>'; 
     var html = []; 
     $.each(data, function() 
     { 
      html.push(template.format(this)); 
     } 
     $('#tests').append(html.join('')); 
    } 
); 

EDIT: Modified the string.Format function взять ключ на основе имени. Теперь ваш код шаблона может использовать {name}, {descr} вместо использования {0}, {1}. Функция попытается найти свойство с тем же именем в аргументе, переданном функции.

Кроме того, посмотрите на подход Рика Страйла и посмотрите, имеет ли он больше смысла для вас.

http://www.west-wind.com/WebLog/posts/300754.aspx

Answer 2

Я бы не добавлять внутри каждого. Лучше либо использовать stringbuilder, либо нажать на массив и добавить один раз с .join()

Выбор зависит от того, какой браузер вы пытаетесь оптимизировать. Добавление к DOM довольно инвазивно из-за экрана reflows, поэтому я бы минимизировал количество раз, которое я называю .append.

В Интернете есть много сравнений производительности, которые вдаваться в детали по производительности обоих вариантов. Один here.

Пример массива присоединиться

$.getJSON("api/test", 
    function(data) 
    { 
     var rowsToAppend=[]; 

     $.each(data, function() 
     { 
      rowsToAppend.push('<tr><td></td></tr>'); 
     } 

     $("#tests").append(rowsToAppend.join()); 
    } 
);