JSVIEW data-link维护UI上的x和y Index的Template

Question

我在我的演示应用程序上使用 JSView。在网页上，当我将 link 模板重新 HTML div 以获取最新值时。我想维护 HTML 上的 x 和 Y 索引。当它执行模板的重新 link 时，html 完全刷新，这使得用户松开他们所在页面的 x 和 y 坐标。

我们将不胜感激任何帮助。

$(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();
}

Answer 1

调用 template.link("#result_wrapper", json) 将完全重新呈现 "#result_wrapper" 元素的内容。

看起来您的场景涉及使用来自服务器的 json 来呈现和 link HTML 内容在浏览器中，并且可能客户端交互触发数据的可观察更新(json) 在浏览器中，但另外还有某种 json 数据到服务器的往返：可能将修改后的 json 发送回服务器，但也获取更新的 json 来自服务器，其中可能包括服务器端更新。

在那种情况下，如果您希望在获取修改后的 json 时在浏览器中进行增量更新（以避免替换所有 HTML，从而能够维护用户状态），您只需要观察更新客户端 json 被修改的部分。实际上，您需要在当前 json 和下载的更新之间执行 'diff'。

JsRender 和 JsViews 通过使用 compiled View Models, and in particular, the vm.merge(newJson) 功能为该场景提供支持。

另请参阅其他相关 JsRender/JsViews 文档主题，例如 this and this。

JSVIEW data-link维护UI上的x和y Index的Template

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

asp.net-mvc

jquery

jsrender

jsviews