Я недавно выполнил это упражнение, и хотя подход с тегом <script> кажется немного хакерским, я принял это как хорошее решение и выбрал свою собственную версию (версия John Resigs, безусловно, действительно хороша, но я легко выбрал свою)Понятно для моей собственной версии мозга)
Моя версия является базовым шаблоном и заменой с использованием заменяемых значений в form ##VALUE##
ШАБЛОН: (шаблон одного элемента или шаблон строки)
<script type="text/html" id="ItemTemplate">
<table>
<tr>
<td>##LABEL1##</td>
<td>##VALUE1##</td>
<tr>
</table>
</script>
ФУНКЦИЯ КОНТРОЛЯ СТРОИТЕЛЬСТВА:
function constructFromTemplate(content, values, appendTo) {
var modifiedHtml = content;
modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##');
$.each(values, function (n, v) {
modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v);
});
if (appendTo != null)
{
$(appendTo).append(modifiedHtml);
//initializePageElements();
}
return modifiedHtml;
}
ИСПОЛЬЗОВАНИЕ
Содержание будет возвращеноиз функции и / или вы можете установить параметр appendTo, чтобы elementID автоматически установил append содержимое.(установите null на не append)
Заменяемые значения просто добавляются как динамический объект, где имена object являются заменяемыми элементами.
var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);
примечание: Я закомментировал //initializePageElements();, это используется для инициализации jQuery плагинов, стилей в шаблоне.
Кажется, что работают только встроенные стили при вставке содержимого в DOM