Построитель строк таблицы jQuery

Question

Есть ли подходящий подход для построения 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' из этого поста , вы можете сделать что-то вроде

$.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(''));
    }
  );

РЕДАКТИРОВАТЬ: Изменение строки. Функция форматирования , чтобы получить ключ на основе имени. Теперь ваш код шаблона может использовать {name}, {descr} вместо {0}, {1}. Функция попытается найти свойство с тем же именем в аргументе, переданном функции.

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

http://www.west -wind.com / WebLog / сообщений / 300754.aspx

Answer 2

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

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

Существует множество сравнений производительности в сети, которые детально описывают производительность обоих вариантов. Один здесь .

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

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

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

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