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()方法'理解'数组的事实：

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更新渲染模板

1 个答案: