Чуть не забыл - когда шаблоны пишете - обязательно везде ставить точки с запятой и не использовать комментов //

Т.к весь шаблон функция превращает в одну строку в итоге - будут синтаксические ошибки без точек с запятой.

Эту шаблонку можно по-разному модифицировать, я использую чуть упрощенный вариант:

function tmpl(str){
    var fn = new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" + document.getElementById(str).innerHTML
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'") + "');} return p.join('');");


    return fn
}

Вызвать компиляцию шаблона и тут же получить результат для data можно так:

tmpl('template-id')(data)

А разве нельзя в шаблонах использовать комменты следующего вида?

/* comment */

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

Угу, такой комментарий вполне подойдет.

Извините, конечно, но это семиколесный велосипед. Его много раз изобретали до вас. И он конечно ездит. Но недалеко.
Есть куча js-фреймворков, превращающих маниуляции с DOM в детскую игру. Есть XSLT выполняемый непосредственно броузеорм или через JS. И в конце концов есть куча бесплатных или очень дешевых хостингов с php/.NET/phyton...

для чего вообще это нужно?

взял ваши примеры реализовал все работает гладко, мне понравилось

Эта функция шаблонизации не будет работать в ASP-страницах.

Дело в том, что дескрипторы начала (<%=) и конца (%>) шаблона уже зарезервированы ASP-движком.

А как сделать, чтоб при нажатии на кнопку появлялось окошко с текстом?(что надо в скрипте написать?)
(что надо здесь написать?)("действие")

Спасибо за информацию.
Вопрос, не могу решить куда поместить шаблон, когда он необходим при реализации плагина/библиотеки...
Не хочется каждый раз копи-пастить шаблон в новый проект, где будет использоватся библиотека...

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

Это уже вопросы к вашему движку и фреймворку. Javascript-шаблон - такой же шаблон как и остальные.

Удивился по поводу сказанного, что split.join работает быстрее replace.

Поэтому провел тесты.

Делал замену 10 различных значений {blahblah} в длинной строке.
Запускал в IE6 и FF3.5. Оба браузера показали преимущество функции replace. Если в FF (на маленьких итерациях) значения еще хоть куда не шли, - похожие, то в IE6 split.join работает в разы медленнее replace. На больших итерациях split.join проигрывает очень сильно и в FF, и в IE6.

а еще можно выкинуть лишнее - функция print нигде не используется, видимо ресиг юзал её для своих целей, потом забыл выкинуть её, а все остальные тупо содрали
print=function(){p.push.apply(p,arguments);}

пример с шаблонизатором сделанный на основе выше предложенного ссылка на архив

У меня почему-то не работает, просто возвращает id темплейта - и все.

UPD. id шаблона должен подходить под регулярку \w+, иначе шаблонизатор принимает строку, переданную первым параметром в tmpl за шаблон, переданный текстом. Т.о. нельзя использовать дефисы в идентификаторах и такая запись не будет воспринята шаблонизатором как надо:

<script type="text/html" id="tpl-template">
...
var tpl = tmpl('tpl-template', obj);

Вот если кто-то любит жквери, а еще любит шаблоны держать отдельно от страниц, то тут показано, как можно загружать внешние шаблоны http://www.clearboth.ru/article/using-external-templates-with-jquery-tem...

поясните значение $1 при реплейсинге.

Для шаблонизации я бы использовал связку js+XSLT

Самый лёгкий шаблонизатор (jQuery):

var template = '<div class="pop-up-overlay"></div>' +
                    '<div class="pop-up">' +
                    '  <div class="heading">{title}</div>' +
                    '  <div class="notify">{notify}</div>' +
                    '  <div class="content">{content}</div>' +
                    '</div>';

data = {
  title: 'Добавление товара в корзину', 
  notify: 'Прошло успешно!', 
  content: 'Товар "Погремушка" успешно добавлен в корзину покупок.'
}

function render(template, data) {
  var html = '';

  $.each(data, function(k, v){
    html = template.split('{' + k + '}').join(v);

    template = html;
  });

  return html;
}

$('body').prepend(render(template, data));

Замечательно!!! Спасибо.
Можно конечно использовать существующие библиотеки, но мне нравится этот вариант.
Можно использовать несколько шаблонов, разместив их в объекте.
Это наверное пригодилось бы при работе с содержимым балунов в гугл картах.

Я заменил открывающий и закрывающий тэги в шаблоне на $[[ и ]].

var obj_templ = {
	str_templ_1 : '\
<div id="$[[id]]" class="$[[(i % 2 == 1 ? " even" : "")]]">\
	<div class="grid_1 alpha right">\
		<img class="righted" src="$[[profile_image_url]]"/>\
	</div>\
	<div class="grid_6 omega contents">\
		<p><b><a href="/$[[from_user]]">$[[from_user]]</a>:</b> $[[text]]</p>\
	</div>\
</div>',
	str_templ_2 : '\
<div id="$[[id]]" >\
	<a href="/$[[from_user]]">\
		<img class="righted" src="$[[profile_image_url]]" style="width:90px;"/>\
		$[[from_user]]\
	</a>\
	$[[text]]\
</div>'
}
results_1.innerHTML = tmpl(obj_templ.str_templ_1)(dataObject);
results_2.innerHTML = tmpl(obj_templ.str_templ_2)(dataObject);