Пользовательский интерфейс 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.

Это цепочка, поэтому вы можете загрузить 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

Получайте удовольствие!