JSVIEW data-link the Template to maintain the x and y Index on the UI

I am using JSView on my demo application. on the webpage when i re-link the template to the HTML div to get the latest values. I want to maintain the x and Y index on the HTML. When it does the re-link of the template the html completely refresh which makes the user to loose x and y coordinate of the page they are on.

Any help will be greately Appreaciated.

$(document).ready(function () {
 window.setInterval( function(){
reLinkTemplateHtml();
}, 5000);}


 function reLinkTemplateHtml() {
 $.getJSON("/Demo/DemoAPI/GETDemoData", { _: new Date().getTime() 

}).done(function (json) {

  $.templates("#Demo-template").link("#result_wrapper", json);
                return true;
            }).fail();
}

Solution

Calling template.link("#result_wrapper", json) will completely re-render the contents of the "#result_wrapper" element.

It looks like your scenario involves using json from the server to render and link HTML content in the browser, and maybe client-side interactivity triggering observable updates of the data (json) in the browser, but in addition some kind of round tripping of json data to the server: perhaps sending modified json back to the server, but also fetching updated json from the server which may include server-side updates.

In that scenario, if you want incremental updates in the browser (to avoid replacing all the HTML, and hence be able to maintain user state) when the modified json is fetched, you need to observably update only the parts of the client json that are modified. In effect you need to do a 'diff' between the current json and the downloaded update.

JsRender and JsViews provide support for that scenario, by using compiled View Models, and in particular, the vm.merge(newJson) feature.

See also other related JsRender/JsViews doc topics such as this and this.