0

ajaxを使用してmysql dbから取得したデータからテンプレートをレンダリングするためのこのコードがあります。

テンプレートのデータを取得するコード:

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);

Web ページにテンプレートを表示する:

  <!-- 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>

問題は、このようにテンプレート エンジンが古いテンプレートのデータを毎回更新する代わりに、新しいテンプレートをレンダリングすることです。

新しいテンプレートをレンダリングする代わりに、既にレンダリングされたテンプレートを更新する方法について何か提案はありますか?

4

1 に答える 1

0

各項目ではなく、配列をループした後にのみ 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 を使用してインクリメンタル レンダリングを行うことを検討できます。別の回答で私が行ったいくつかの提案とリンクを参照してください。

于 2016-06-17T00:40:47.877 に答える