Методы, чтобы избежать создания HTML-строк в JavaScript?

Ответ 1

Инструментарий Dojo имеет весьма полезную систему для обработки фрагментов/шаблонов HTML. Скажем, фрагмент HTML mycode/mysnippet.tpl.html выглядит следующим образом:

<div>
  <span dojoAttachPoint="foo"></span>
</div>

Обратите внимание на атрибут dojoAttachPoint. Затем вы можете сделать виджет mycode/mysnippet.js с помощью фрагмента HTML в качестве его шаблона:

dojo.declare("mycode.mysnippet", [dijit._Widget, dijit._Templated], {
  templateString: dojo.cache("mycode", "mysnippet.tpl.html"),

  construct: function(bar){
    this.bar = bar;
  },
  buildRendering: function() {
    this.inherited(arguments);
    this.foo.innerHTML = this.bar;
  }
});

Элементы HTML, указанные атрибутами точек присоединения, станут членами класса в коде виджета. Затем вы можете использовать шаблонный виджет так:

new mycode.mysnippet("A cup of tea would restore my normality.").placeAt(someOtherDomElement);

Хорошей особенностью является то, что если вы используете систему сборки dojo.cache и Dojo, она вставляет текст шаблона HTML в код javascript, так что клиенту не нужно делать отдельный запрос.

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

Ответ 2

Существует много возможных методов. Возможно, наиболее очевидным является наличие всех элементов на странице, но их hidden - тогда ваш JS может просто отобразить их/показать их по мере необходимости. Это может быть невозможно, хотя в определенных ситуациях. Что делать, если вам нужно добавить число (неуказанное) дубликатов элементов (или групп элементов)? Тогда, возможно, есть элементы, о которых идет речь hidden, и используя что-то вроде jQuery clone, вставьте их как требуется в DOM.

Альтернативно, если вам действительно нужно создавать HTML "на лету", то определенно сделайте свой собственный класс обработанным, чтобы у вас не было фрагментов, разбросанных по вашему коду. Вы можете использовать jquery-литеральные создатели, чтобы помочь в этом.

Ответ 3

Я не уверен, что он квалифицируется как "метод", но я обычно стараюсь избегать построения блоков HTML в JavaScript, просто загружая соответствующие блоки из внешнего блока через AJAX и используя JavaScript для их замены и внесите/поместите их по мере необходимости. (то есть: ни одно из низкоуровневых перетасовки текста не выполняется в JavaScript - просто манипуляция с DOM.)

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

Ответ 4

Иногда я использую собственный метод для возврата структуры node на основе предоставленных аргументов JSON и добавляю это возвращаемое значение в DOM по мере необходимости. Он недоступен, если JS недоступен, как некоторые бэкэнд-решения могут быть.

Ответ 5

После прочтения некоторых ответов мне удалось создать собственное решение с использованием Python/Django и jQuery.

У меня есть фрагмент HTML как шаблон Django:

<div class="marker_info">
    <p> _info_ </p>
    <a href="{% url index %}"> more info... </a>
</div>

В представлении я использую метод Django render_to_string для загрузки шаблонов в виде строк, хранящихся в словаре:

snippets = { 'marker_info': render_to_string('templates/marker_info_snippet.html')}

Хорошая часть этого вопроса я могу использовать теги шаблонов, например, функцию url. Я использую simplejson, чтобы выгрузить его как JSON и передать его в полный шаблон. Я все еще хотел динамически заменить строки в JavaScript-коде, поэтому я написал функцию для замены слов, окруженных символами подчеркивания, с моими собственными переменными:

function render_snippet(snippet, dict) {

    for (var key in dict)
    {
        var regex = new RegExp('_' + key + '_', 'gi');
        snippet = snippet.replace(regex, dict[key]);
    }

    return snippet;
}