ajax로 렌더링 된 템플릿 업데이트하기

Question

나는이 코드를 사용하여 ajax를 사용하여 mysql db에서 얻은 데이터로부터 템플릿을 렌더링했다.

코드 템플릿에 대한 데이터를 얻을 수 있습니다 :

이

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

문제 대신 데이터를 갱신 템플릿 엔진이 새 템플릿을 렌더링이 방법 즉 :

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

는 웹 페이지에 템플릿을 표시 매번 오래된 템플릿에서.

새로운 렌더링 대신 이미 렌더링 된 템플릿을 업데이트 할 수있는 방법에 대한 제안이 있으십니까?

Answer 1

각 항목보다는 배열을 순환 한 후에 DOM에 삽입하는 것이 더 나을 수도 있습니다. (더 나은 성능).

당신은 HTML 문자열을 증가하고, 마지막에 삽입 할 수 :

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

:

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() 방법을 사용할 수있는 배열 '이해'

어느 쪽이든 이전 내용은 새로운 내용으로 대체 될 것입니다 ...

personData가 연속적인 요청에 대부분 같은 사람 항목을 포함하려는 경우 ts이면 JsViews를 사용하고 증분 렌더링을 사용하여 변경되지 않은 사람 항목이 전혀 렌더링되지 않도록 할 수 있습니다. 다른 대답 here에서 만든 몇 가지 제안 및 링크를 참조하십시오.