Динамическое содержимое HTML-страницы

Question

Предположим, я хочу показывать разные элементы каждый раз, когда пользователь меняет параметры поиска. Я получаю новые элементы от AJAX (это обязательно, поэтому я не могу использовать POST, поэтому я не могу использовать цикл {% for%} шаблона django). В настоящее время я беру возвращенный список элементов и передаю его функции javascript, которая генерирует HTML-код. Эта функция не более, чем конкатенация строк вместе и формирование нового содержимого HTML.

Простой пример:

function build_items_list(items_list, container){ 
    container.innerHTML = ''; 
    for(var i=0; i<items_list.length; i+=1){ 
     var item = items_list[i]; 
     container.innerHTML += '<div>' + 
           '<input type="checkbox" id="' + item.id.toString() + '">' + 
           '<a href="' + item.url+'"><b>' + item.name + '</b></a>'+ 
           '</div>' 

    } 
} 

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

Каков правильный способ создания такого содержимого?

спасибо.

Answer 1

Во-первых, нет никакого правильного пути.
То, как вы делаете это хорошо.
Как мне сказали, мне пришлось много раз создавать контент в JavaScript и поэтому придумал функцию для создания контента. Его можно легко модифицировать, и я нахожу, что он хранит код, imo, cleaner.

function createElement(element, attributes, text) { 
    // function to create an element with class and text if wanted. 
    // attributes is an object of key value items. Key is the attribute, value is the value. 
    // you could change the "class" to an argument and use it to set anyAttribute 
    var el = document.createElement(element); 
    $.each(attributes, function(key, value) { 
     el.setAttribute(key, value); 
    }); 
    if (text) { 
     var t = document.createTextNode(text); 
     el.appendChild(t); 
    } 
    return el; 
} 

для примера выше можно назвать так:

createElement("div", { 
    "class": "btn btn-default btn-sm btn-gene col-md-4", 
    "value": value }, "remove item") 

Это создает следующий элемент

<div class"btn btn-default btn-sm btn-gene col-md-4" value="value">remove item</div> 

Youre все еще собирается строить элементы в JavaScript и добавления их к DOM, который немного работает, но я нашел, что это помогает с СУХОЙ.

С другой стороны, вы можете использовать, как сказал @Or Duan, интерфейсный фреймворк или вы можете использовать внешний шаблонный движок.
Рамки обычно содержат шаблонные модули и значения привязки данных, чтобы они менялись при изменении значений, но вы можете сами делать логику и просто использовать механизм шаблонов вне рамки.
В зависимости от ваших потребностей существуют различные шаблонные двигатели - https://garann.github.io/template-chooser/

Answer 2

Извините, но нет простого решения, поэтому библиотеки, такие как Angular, Ember и т. Д., Настолько успешны, вы можете привязать переменные js к шаблонам.

Вы можете написать много функций, как вы делали для каждого шаблона, но подумайте об использовании 3-й партийной библиотеки.

Пример кода в угловую:

<div ng-repeat="item in items_list"> 
    <div> 
     <input type="checkbox" id="{{item.id}}"> 
     <a href="{{item.url}}"><b>{{item.name}}</b></a> 
    </div> 
</div>