Есть ли какой-либо чистый способ захватить HTML-шаблон, размещенный в <head> с помощью jQuery?

на основе книги Николая Зака в «обслуживаемой JavaScript», я понимаю, что лучший способ поставить небольшой шаблон HTML в моей странице, чтобы добавить что-то вроде:Есть ли какой-либо чистый способ захватить HTML-шаблон, размещенный в <head> с помощью jQuery?

<script type="text/x-templates" class="templates"> 
      <div class="template1"> ... </div> 
      <div class="template2"> ... </div> 
      ... 
    </script>

Мне нравится этот подход лучше, чем размещение мои шаблоны <body> и скрыть их с помощью css, потому что они все равно будут отображаться в браузерах, таких как dillo.

Путь я в настоящее время захватывая их с JQuery это:

var $templates = $('<div/>').append($('.templates').text()).children();

Вещи, которые я пытался, что не работал, являются:

var $templates = $('.templates'); 
    var $templates = $($('.templates').text()); 
    var $templates = $($('.templates').html());

Решение у меня сейчас работает, но это не кажется мне очень изящным. Какой был бы лучший способ сделать это?

источник

2013-04-03 Oscar

Вы должны были попробовать эти 3 ключевых слова в Google ** jquery html templating ** ---> http://stephenwalther.com/archive/2010/11/30/an- введение к Jquery-шаблонов.aspx – kidwon

Он может предпочесть свою роль. – jmar777

Да, я хотел бы избежать использования дополнительной зависимости как можно больше, но спасибо за ссылку. – Oscar

$($('.templates').html()) будет бороться, если внутренний HTML класса «шаблонов» начинается с места, так что вам нужно $($('.templates').html().trim()) вместо этого. Вы будете в конечном итоге в дальнейших неприятностей, хотя, потому что внутренний HTML вашего сценария тег не имеет корневой узел, так что вы бы вместо этого нужно что-то вроде:

<script type="text/x-templates" class="templates"> 
    <div> 
     <div class="template1">temp1</div> 
     <div class="template2">temp2</div> 
     ... 
    </div> 
</script>

Вы могли бы получить HTML из template1 с что-то вроде:

var templatesCollection = $($(".templates").html().trim()); 
alert(templatesCollection.children(".template1").html());

Но, все это говорит, почему бы не поставить каждый шаблон в отдельном тег сценария с идентификатором? (Класс не имеет особого смысла, если вы не планируете иметь более одного экземпляра, и в сценарии шаблонного я предположил бы, что это не то, что вы хотите.)

Так что-то подобное:

<script type="text/html" id="template1"> 
    <div>temp1</div> 
</script>

И вот очень простой селектор: $("#template1").html()

источник

2013-04-03 23:35:33 Snixtor

Привет, Снейкдор, спасибо за ваш ответ. Вы правы, я должен использовать id для этой цели. Я пытаюсь использовать отдельные теги скриптов, но в итоге я сталкиваюсь с той же проблемой. Если я использую .html(), я не получаю объект jQuery. Я также пробовал $ ("# template1"). Children(), но поскольку он рассматривает содержимое как текст, он не находит его. – Oscar

Вы можете обернуть строку html в '$ ('html_text_here')', но есть ограничения. Как я уже упоминал выше, он не может начинаться с пробелов, поэтому вам нужно обрезать его, ему также нужен корневой узел. - Когда я говорю корневой узел, я имею в виду, что объект jQuery должен представлять один элемент (хотя у этого элемента могут быть дети). – Snixtor

Oups Я забыл 'trim()'. Хорошо, да, похоже, это лучший подход. Так что, если я правильно понимаю, насколько я имею каждый шаблон на отдельном '

Редактировать: Я думаю, что изначально неправильно понял ваш вопрос - я не знал, что у вас было несколько шаблонов в пределах того же script тегов. Я бы предложил разбивать каждый шаблон на собственный тег, поскольку это может быть проще в управлении (а затем у вас нет дополнительного анализа и div тегов, чтобы они не разделялись). Например, рассмотрим это для шаблона разметки:

<script type="text/x-templates" class="template" id="template1"> 
    [template 1] 
</script> 

<script type="text/x-templates" class="template" id="template2"> 
    [template 2] 
</script>

И что-то вроде этого в вашем JavaScript:

// create a map of templates (keyed by the template's id) 
var templates = {}; 
$('.template').each(function() { 
    var $template = $(this); 
    templates[$template.attr('id')] = $(this).html(); 
}); 

//usage 
$('body').append(templates.template1); 
$('body').append(templates.template2);

Вот демо его в действии: http://jsfiddle.net/KyWj6/

источник

2013-04-03 23:24:01 jmar777

Спасибо jmar777, мне нравится идея обернуть все шаблоны как один объект. Чтобы следовать предложению Snixtor, я бы изменил строку 'templates [$ template.attr ('id')] = $ (this) .html();' for 'templates [$ template.attr ('id')] = $ ($ (this) .html(). trim()); ' – Oscar

' trim() '- хорошая идея. Вы уверены, что хотите, чтобы карта шаблонов была объектом jQuery, а не строками? Я спрашиваю, потому что тогда вы имеете дело с фрагментами DOM, которые будут сдержанными и, возможно, имеют непреднамеренные последствия. Струны никогда не будут иметь таких «хечей». – jmar777

Хм, это хороший момент, но я думаю, что возникает другой вопрос. – Oscar

Попробуйте это:

var $templateHtml = $('.templates').html(); 
var $templates = $('<div/>').html(templateHtml);

или, альтернативно, сделать это одной строкой:

var $templates = $('<div/>').html($('.templates').html());

источник

2013-04-03 23:24:21

Есть ли какой-либо чистый способ захватить HTML-шаблон, размещенный в <head> с помощью jQuery?

ответ

Смежные вопросы