Как правильно строить целый блок на странице с помощью javascript?

Question

[olegkurbatov]

Тяну из json файла инфу.
Вставлял на сайт ее в таком виде:

news.forEach(function(news) {
            var article = document.createElement('article');
            article.className = "block-news__news";
            article.innerHTML = '<span><h2 class="block-news__header">'+news.header+'</h2><time class="block-news__date">'+news.date+'</time></span><p id="'+news.preId+news.id+'">'+news.content+'</p><a class="block-news__more" id="'+news.id+'" href="#">more ></a>'

            divNews.insertBefore(article, divNews.children[1]);
        });

Но эта строка innerHTML она очень нечитабельна... Вообще не доходит как сделать иначе. Как "расписать" структуру этого блока по нормальному?

как исправить это уродство?

Comments

[Сергей delphinpro]

Очевидный ответ - использовать шаблонизатор.

[olegkurbatov]

Сергей: Хороший ответ, но тут вопрос в саморазвитии, а не готовых решениях. Но спасибо, учту, полезная тема!

[Сергей delphinpro]

olegkurbatov: ну напишите свой шаблонизатор для развития.
В принципе несложно повторить функционал функции _.template() из underscore

Answer 1

[Егор Живагин]

news.forEach(function(news) {
            var article = document.createElement('article');
            article.className = "block-news__news";
            article.innerHTML = '
                              <span>
                                  <h2 class="block-news__header">'+news.header+'</h2>
                                  <time class="block-news__date">'+news.date+'</time> 
                              </span>
                              <p id="'+news.preId+news.id+'">'+news.content+'</p>
                              <a class="block-news__more" id="'+news.id+'" href="#">more ></a>'

            divNews.insertBefore(article, divNews.children[1]);
        });

Сработает же, да?)

Comments

[olegkurbatov]

Не сработает. )

[M-ka]

не правильный перенос, нужно так:
до
а = 'third parties and ';

после разноса
а = 'third ' +
'parties and ';

Answer 2

[Алексей Николаев]

В похожей ситуации подключил haml-js. Всю разметку хранил в haml-шаблонах на стороне сервера. Далее, я подгружал haml-шаблон при помощи $.load, передавая в него набор данных для рендера собственно haml-движком, и после рендера отображал полученные данные.

Код, к сожалению, не могу скинуть за давностью дел, но алгоритм я вам подсказал. Красиво, чисто, без уродства. Явный минус - быстродействие - можно легко устранить при помощи какого-нибудь localStorage: тогда шаблон придется загружать с сервера только единожды.

Comments

[olegkurbatov]

Изменил структуру когда другим образом, в ответе гляньте и оцените если не трудно, спасибо)

Answer 3

[olegkurbatov]

news.forEach(function(news) {
var article = document.createElement('article');
var span = document.createElement('span');
var h2 = document.createElement('h2');
var time = document.createElement('time');
var p = document.createElement('p');
var a = document.createElement('a');

article.className = "block-news__news";
h2.className = "block-news__header";
time.className = "block-news__date";
a.className = "block-news__more";

h2.innerHTML = news.header;
time.innerHTML = news.date;
p.innerHTML = news.content;
a.innerHTML = 'more >';
a.href = '#';

divNews.insertBefore(article, divNews.children[1]);
article.appendChild(span);
span.appendChild(h2);
span.appendChild(time);
article.appendChild(p);
article.appendChild(a);
});

Перепилил, так будет лучше, но правильно ли?

Comments

[Антон Ивченко]

Главное, чтобы divNews еще не был на странице и был включен только после этого кода на страницу. Иначе при большом количестве данных можно и вкладку положить.

[olegkurbatov]

Антон Ивченко: Хм... Учту, спасибо)

Answer 4

[RidgeA]

Вот могу посоветовать еще шаблонизатор для клиента
basisjs.com/templates
Достаточно быстрый и с биндингом.