Пользовательский интерфейс jQuery: лучший способ загрузить разметку HTML?

Question

Какой лучший способ загрузить разметку HTML для пользовательского виджета пользовательского интерфейса jQuery?

До сих пор я видел элементы, просто созданные с использованием строк (т.е. $(...).wrap('<div></div>')), что хорошо для чего-то простого. Тем не менее, это крайне затрудняет последующее изменение для более сложных элементов.

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

Answer 1

Что-то, что довольно аккуратно сделать, это:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

Таким образом, вы создаете элемент и сохраняете его ссылку в переменной для дальнейшего использования.

Answer 2

Если у вас большой объем сложного HTML, и вы не хотите иметь дело с жестко закодированными строками в своем коде JavaScript, вы можете поместить его в отдельный файл HTML и использовать Ajax load function .

Это цепочка, так что вы можете загрузить файл HTML (целиком или выделенный фрагмент), вставить его в ваш текущий DOM и продолжить работу.

Answer 3

Часто для действительно сложных шаблонов я просто сохраняю блоки html в виде строк в объектах JSON для последующего доступа ... например:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

А потом просто сделайте замену тем, когда все вернется. Таким образом, разметка несколько отделена от логики загрузки данных, поэтому замена шаблонов и т. Д. Может быть немного быстрее.

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

В любом случае, этот подход хорошо сработал для меня с виджетами AJAX и тому подобным, где существует вероятность, что дизайн может радикально измениться вокруг.

Answer 4

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

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

Затем вы можете получить свою разметку, используя jQuery ...

var markup = $('#template-example').html();

И проанализируйте те примеры JS, которые я там добавил, используя шаблонизатор, такой как тот, что в Underscore.js (который я рекомендую) или один из jQuery в этом ответе: Шаблонные движки jQuery

Веселись!