Каков наилучший способ вставки повторяющихся блоков HTML с небольшими изменениями?

Question

У меня есть динамически созданный список, но каждый элемент представляет собой довольно большой фрагмент HTML, который имеет общую структуру и несколько переменных.
Что было бы лучшим способом сделать это с помощью jQuery?

Answer 1

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

https://github.com/janl/mustache.js действительно хороший, я слышал (лично его не использовал).

Я использовал один из Underscore.js

последний будет выглядеть примерно так ..

var myTemplate = _.template("<div>This is my reusable block with {{ count }} variables"); 

$.each([1,2,3,4], function(elm, i){ 
    $('body').append(myTemplate ({count: elm})); 
}) 

Вот jsfiddle пример http://jsfiddle.net/K8VHb/

Answer 2

Один из способов обработки большого количества HTML в клиент должен использовать систему atemplate. Если вы хотите сохранить его jQuery centric then jQuery templates, это один из вариантов, но я считаю, что он не был продолжен.

У меня был большой успех with Underscore templates, которые бывают быстрыми и простыми в использовании.

Answer 3

Я бы использовал jQuery templates.

с помощью Jquery шаблонов состоит из двух частей:

шаблона (обычно HTML):

<script id="myTemplate" type="text/x-jquery-tmpl"> 
    <div>${text} ${otherStuff}</div> 
</script> 

и данных (как правило, JSON или JavaScript Object):

var data = { text: 'hello world!', otherStuff: 'foobar' }; 

Тогда вы просто привязываете данные к шаблону

затем добавить полученный HTML к вашему DOM: шаблоны

$('#someContainer').append(resultingHTML); 

JQuery предлагают большую гибкость с условными/петли в шаблонах, таких как {{если}} и {{каждый}}, и JSON является очень простой язык передачи данных для работы.

Answer 4

Я повторю то, что сказал CambridgeMike и Саймон Смит: «Используйте библиотеку шаблонов», за исключением того, что я подключу другое, и я думаю, что лучше. Используйте Handlebars.js. Это тот же самый, который выбрал Ember.js, он отличный и он хорошо сочетается с Backbone.js.

Это то, что вы можете использовать в течение длительного времени.

Answer 5

Воспользовавшись методом объединения массивов (объединяет элементы в строки), мой любимый подход. Используя это вместе с JQ, я никогда не понимал привлекательности шаблонов JS templating. Это также удобно для форматирования HTML в легко читаемом стиле без потливости строк в JavaScript. Я не тестировал это, так что может быть синтаксис goofs.

var standardList = [ 
    '<li>Always here</li><!--could add a bunch more non-variable LIs here-->', 
    '<li>', 
    , //this is key #2 - one comma per line at the end makes counting easy 
    '</li>', 
    '<li>More non-variable LIs</li><!--possibly more non-variable LIs here-->', 
    '<li>', 
    , //this is key #6 
    '</li>' 
]; 

//you could have lots of these or an array of them dropped in from a server 
var variableListItems = { 
    key_2:'first Var list value', 
    key_6:'second variable list value' 
}; 

function buildFromListTemplate(valuesObj,listTemplate){ 
    for(var x in valuesObj){ 
     listTemplate[x.split('_')[1]] = valuesObj[x]; 

     //x.split('_') returns array ['key',<number>] for each key in object 
     //so [1] gives array key 
    } 
    return listArray.join(''); //smooshes array into one big string 
} 

$('#someExistingUL').html(
    buildFromListTemplate(variableListItems, standardList) 
); 

Примечание: мощная, но простая модернизация будет обрабатывать LI-обертку значений внутри функции buildFromListTemplate.Таким образом, ключи, которые вы ввели в объект значений, были бы необязательными и не оставляли пустой LI, если они не были предоставлены.

Когда дело доходит до форматирования больших кусков HTML, разделение/объединение - ваш друг и есть мощная утилита в целом. Еще одна удобная польза для создания списка или строки таблицы из существующего набора значений:

var ulHtmlString = [ 
'<ul><li>', 
    arrayOfValues.join('</li><li>'), 
'</li></ul>' 
].join('') 

Вы можете построить на этом для автоматического преобразования 2D массивов в таблицах. Изучите некоторые regEx (которые можно использовать вместо строк в методе split), и вы можете легко преобразовать обратно из HTML в массивы и объекты только для данных в случаях, когда HTML не является однородным.