Обновите шаблон с усами JS - PullRequest
Новая
       11

Обновите шаблон с усами JS

0 голосов
/ 14 февраля 2019

Я использую mustache js для рендеринга шаблона с данными из API и работает хорошо, но мне нужно через некоторое время обновить (перерисовать) тот же шаблон.В моем случае у меня есть список в шаблоне, например:

template.html 

<div id="template">
  {{#list}}
    <span>{{firstName}} {{lastName}} - {{phone}}</span>
  {{/list}}
</div>

index.js 

$(document).ready(function(){

  $.ajax(
    //some ajax here
  ).done(function(response){
    loadTemplate(response);
  });

});

function loadTemplate(data){
  var template = $("#template").html();
  Mustache.parse(template);
  var render = Mustache.to_html(template, data);
  $("#template").empty().html(render);
};

Но пользователь может добавить больше элементов в этот список, и после этого мне нужно обновить шаблон усов.Я попытался вызвать Ajax (ответ с новым значением add в списке), затем снова вызвать функцию loadTemplate, но не работает, список не изменяется (обновляется) с новыми значениями.

1 Ответ

0 голосов
/ 14 февраля 2019

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

Решение состоит в том, чтобы сохранить исходный шаблон в другомместоположение (например, внутри элемента с id=#originalTemplate).

Затем выполните следующее: 

function loadTemplate(data){
  var template = $("#originalTemplate").html(); // NOTE we use original template which does not get overriden
  Mustache.parse(template);
  var render = Mustache.to_html(template, data);
  $("#template").empty().html(render);
};
...