Как я могу использовать буквенную разметку DOM в качестве шаблона прототипа?

Question

Prototype Шаблон позволяет легко подставлять значения в шаблон строки. Вместо того, чтобы объявлять исходную строку шаблона в моем коде, я хочу извлечь исходную строку из DOM.

Например, в моей разметке у меня есть элемент:

<div id="template1">
  <img src="#{src}" title="#{title}" />
</div>

Я хочу создать шаблон с внутренним содержимым элемента div, поэтому я попробовал что-то вроде этого:

var template = new Template($('template1').innerHTML);

Проблема в том, что в представлении innerHTML в Internet Explorer кавычки вокруг значения атрибута опускаются, когда в этом значении нет пробелов. Я также пытался использовать Element # inspect , но в Internet Explorer я получаю нерекурсивное представление элемента / поддерева.

Есть ли другой способ получить шаблонное представление содержимого поддерева?

Answer 1

Перейдите на помощь:

  

Вы также можете встроить скрипт:

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

     

Быстрый совет: встраивание скриптов в ваш   страница с неизвестным типом контента   (так обстоит дело здесь - браузер   не знает, как выполнить   text / html script) просто игнорируются   браузером - и поисковыми системами   и скринридеры. Это идеальный   устройство для маскировки шаблонов   на вашу страницу. Мне нравится использовать это   техника для быстрых и грязных дел   где мне просто нужен маленький шаблон или   два на странице и хотите что-то   легкий и быстрый.

     

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

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

Answer 2

Похоже, вы можете встроить исходный код шаблона в тег textarea вместо div и извлечь его, используя Element # value .

Конечно, делает разметку немного странной, но она все же кажется разумно дружественной для дизайнеров.

Кроме того, как отметил Джейсон в комментарии к исходному вопросу, использование тега img в текстовой области предотвращает ложный запрос неверного изображения.