@Hellas

Шаблонизатор или что?

Сейчас использую шаблонизатор для построения HTML в соответствии с json-данными.
При обновлении, вся страница, вместе с header'ом, рендерится на стороне сервера, а при переходе на другие страницы, ajax'ом берутся данные о запрашиваемой странице и отрендеренная вставляется в текущий HTML.

Но что делать, если нам необходимо перерендерить отдельный фрагмент, например:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

Handlebars:
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

=>

<ul class="people_list">
  <li>Yehuda Katz</li>
  <li>Alan Johnson</li>
  <li>Charles Jolley</li>
</ul>


И тут клиент посылается запрос, в котором сервер возвращает следующие данные:

{
  people: [
    "Katz Yehuda",
    "Jolley Charles",
    "Johnson Alan",
    "Yehuda Katz",
    "Charles Jolley"
  ]
}


Необходимо перерендерить {{#each people}} с новыми данными. Как это сделать?
В вопросе - Как перерендерить блок в handlebars? сказали, что для таких целей необходимо использовать фреймворки (Backbone, Emberjs, Angular). Но неужели нет шаблонизаторов, которые на это способны?
  • Вопрос задан
  • 684 просмотра
Решения вопроса 3
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Но неужели нет шаблонизаторов, которые на это способны?

Это уже будет не шаблонизатором называться. => Нет таких.
Если нужно что-то маленькое, то попробуйте riot.js
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
В обычном небольшом проекте, так чтобы не пользоваться фреймворками, вы можете перерендерить всю страницу и не париться. Современные браузеры сделают это быстро.

Но если вы хотите рендерить кусочки, то тут не обойтись без какого-то фреймворка вроде Ember (он как раз работает с Handlebars) который умеет это делать.
Ответ написан
Комментировать
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
Самый простой вариант:
Вынести
{{#each people}}
    <li>{{this}}</li>
{{/each}}
как отдельный шаблон
Перерисовывать содержимое ul

Если нужно чуть шустрее, то можно еще анализировать, что уже вставлено и добавлять новое, удалять ненужное
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ну так любой js-шаблонизатор сойдет.

будь-то встроенный в какой-то фреймворк, либо underscore, либо lodash (https://learn.javascript.ru/template-lodash), либо вообще отдельный простенький шаблонизатори типа:
ejohn.org/blog/javascript-micro-templating
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы