将新内容加载到kendo窗口的正确方法是什么?

我有一个窗口里面有一个窗体。 表单中有填充了logging数据的input元素。 用户可以closures窗口并select一个不同的logging来查看。 当用户这样做的时候,我需要用相同的表单再次显示kendo窗口,但是不同的logging数据。 这是我目前正在做的

if (!$("#winContainer").data("kendoWindow")) { $("#winContainer").kendoWindow({ modal: true, width: "969px", height: "646px", title: "View Record", content: "record.jsp" }); } else { $("#winContainer").data("kendoWindow").refresh({url: 'record.jsp'}); } $("#winContainer").data("kendoWindow").center().open(); 

该表单包含在record.jsp中,并且使用我以前从服务器接收的JSON数据(通过在record.jsp中引用的JavaScript)填充它。 我需要确保窗口不显示,直到新的logging数据填充在窗体中。 这是做到这一点的正确方法还是有一些更好的方法?

Solutions Collecting From Web of "将新内容加载到kendo窗口的正确方法是什么?"

我不建议每次创建一个新的窗口或刷新其内容,我建议:

  1. 创建一个窗口,
  2. 每个用户选择一个新的记录,绑定新的数据到窗口,然后打开它。

这样你只需要加载一次页面。

您也可以考虑将页面record.jsp定义为原始页面中的Kendo UI模板。

例:

给出以下用户可选记录:

 var data = [ { text1: "text1.1", text2: "text1.2" }, { text1: "text2.1", text2: "text2.2" }, { text1: "text3.1", text2: "text3.2" }, { text1: "text4.1", text2: "text4.2" } ]; 

并使用以下HTML定义为模板的表单:

 <script id="record-jsp" type="text/x-kendo-template"> <div> <p>This is your form with some sample data</p> <label>text1: <input type="text" data-bind="value: text1"></label> <label>text2: <input type="text" data-bind="value: text2"></label> </div> </script> 

我们的JavaScript会是这样的:

 // Window initialization var kendoWindow = $("<div id='window'/>").kendoWindow({ title : "Record", resizable: false, modal : true, viewable : false, content : { template: $("#record-jsp").html() } }).data("kendoWindow"); 

将数据绑定到窗口并打开它:

 function openForm(record) { kendo.bind(kendoWindow.element, record); kendoWindow.open().center(); } 

最后用数据调用函数。

 openForm(data[0]); 

你可以看到它运行在这个JSFiddle上

注意:如果你仍然喜欢使用外部页面,只需要改变template: $("#record-jsp").html() by: url: "record.jsp"