使用 ajax 更新呈现的模板

Question

我有这段代码可以使用 ajax.

从我的 mysql 数据库中获取的数据呈现模板

获取模板数据的代码：

setInterval(function() {
function ajax(url) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
        resolve(this.responseText);
        };
        xhr.onerror = reject;
        xhr.open('GET', url);
        xhr.send();
    });
 }

ajax("http://localhost/tuntiseuranta/dbajax.php").then(function(result) {
    var personData = JSON.parse(result);
    var i = 0;
    $.each(personData, function (index, person) {

  //var statusid = Math.random()*statuses.length|0;
  var statusid = personData[i].status;
  var status = getStatus(statusid);
  console.log(status);
  var fullName = personData[i].firstname + " " + personData[i].lastname;
  // hashing needed so urls stay stable but don't publish employee names to adorable.io
  var hash = Math.abs((person + '4a_j.rvs4m9kttqgzh5uBtsw5kh%').hashCode()).toString(36)
  var person = {
    name: fullName,
    status: statusid,
    statusClass: status.class,
    statusLabel: status.label,
    hash: hash
  }
  if (status.verbose) {
    person.verbose = status.verbose[Math.random()*status.verbose.length|0];
  }
  var html = $.templates('#personTmpl').render(person);
  $('.js-persons').append(html);
  i++;
})

}).catch(function() {
    console.log("ajax error");
});
}, 5000);

在网页中显示模板：

  <!-- template for one person -->
  <script id="personTmpl" type="text/x-jsrender">
    <div class="person person-{{:statusClass}}" data-toggle="modal" data-target="#personStatusModal" data-status-id="{{:status}}" data-person="{{:name}}">
      <div class="media">
        <div class="person__image pull-right">
          <img class="media-object" src="https://api.adorable.io/avatars/120/{{:hash}}" alt="{{:name}}">
        </div>
        <div class="media-body">
          <h4 class="media-heading">{{:name}}</h4>
          <div class="person__status">
            <span class="label label-{{:statusClass}}">{{if statusLabel}}{{:statusLabel}}{{/if}}{{if statusLabel && verbose}}: {{/if}}
            {{if verbose}}<span class="verbose">{{:verbose}}</span>{{/if}}
          </div>
        </div>
      </div>
    </div>
  </script>

问题是模板引擎每次都会渲染新模板而不是更新旧模板中的数据。

有什么建议可以让它更新已经呈现的模板而不是呈现新模板吗？

Answer 1

循环遍历数组后只插入 DOM 可能更好，而不是在每个项目上插入。（更好的性能）。

您可以递增 html 字符串，并在末尾插入：

ajax("http://localhost/tuntiseuranta/dbajax.php").then(function(result) {
  var personData = JSON.parse(result);
  var i = 0;
  var html = "";
  $.each(personData, function (index) {
    ...
    var person = {
      ...
    }
    ...
    html += $.templates('#personTmpl').render(person);
    i++;
  });
  $('.js-persons').html(html);
})
...

或者您可以创建人员数组，并使用 render() 方法 'understands' 数组的事实：

ajax("http://localhost/tuntiseuranta/dbajax.php").then(function(result) {
  var personData = JSON.parse(result);
  var i = 0;
  var people = [];
  $.each(personData, function (index) {
    ...
    var person = {
      ...
    }
    ...
    people.push(person)
    i++;
  });
  $('.js-persons').html($.templates('#personTmpl').render(people));
})
...

无论哪种方式，以前的内容都会被新内容取代...

如果您的 personData 将在连续请求中包含大部分相同的人物项目，那么您可以考虑使用 JsViews 并进行增量渲染，以便根本不会重新渲染未更改的人物项目。请参阅我在另一个答案 here.

中提出的一些建议和链接

使用 ajax 更新呈现的模板

Updating rendered template with ajax

ajax

jquery

templating-engine

promise

jsrender