windows 将新内容加载到剑道窗口的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14505160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the proper way to load new content into a kendo window?
提问by James
I have a kendo window that has a form inside it. The form has input elements with a record's data populated within it. The user may close the window and select a different record to view. When the user does this, I need to show the kendo window again with the same form but with different record data. Here's what I'm currently doing
我有一个剑道窗口，里面有一个表格。该表单具有输入元素，其中填充了记录数据。用户可以关闭窗口并选择不同的记录进行查看。当用户这样做时，我需要以相同的形式再次显示剑道窗口，但记录数据不同。这是我目前正在做的事情
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();
The form is contained within record.jsp, and I populate it with JSON data that I previously received from server (via JavaScript referenced in record.jsp). I need to ensure that the window does not show until the new record data is populated in the form. Is this the correct way to do this or is there some better way?
该表单包含在 record.jsp 中，我用之前从服务器接收的 JSON 数据填充它（通过在 record.jsp 中引用的 JavaScript）。我需要确保在表单中填充新记录数据之前不会显示该窗口。这是正确的方法还是有更好的方法？
回答by OnaBai
Instead of creating a new window each time or refreshing its content, I do recommend:
我建议不要每次都创建一个新窗口或刷新其内容：
- Create a window,
- Each the user selects a new record, bind the new data to the window and then open it.
- 创建一个窗口，
- 每个用户选择一个新记录，将新数据绑定到窗口然后打开它。
This way you only need to load the page once.
这样你只需要加载一次页面。
You might also consider having the page record.jspdefined as a Kendo UI template in your original page.
您还可以考虑将页面record.jsp定义为原始页面中的 Kendo UI 模板。
Example:
例子：
Given the following user selectable records:
给定以下用户可选记录：
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" }
];
And a form defined as a template with the following HTML:
以及定义为具有以下 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>
Our JavaScript would be something like:
我们的 JavaScript 将类似于：
// Window initialization
var kendoWindow = $("<div id='window'/>").kendoWindow({
title : "Record",
resizable: false,
modal : true,
viewable : false,
content : {
template: $("#record-jsp").html()
}
}).data("kendoWindow");
Bind data to the window and opening it:
将数据绑定到窗口并打开它：
function openForm(record) {
kendo.bind(kendoWindow.element, record);
kendoWindow.open().center();
}
And finally invoking the function with the data.
最后用数据调用函数。
openForm(data[0]);
You can see it running on this JSFiddle
你可以看到它在这个JSFiddle 上运行
NOTE:If you still prefer using the external page, just need to change template: $("#record-jsp").html()by: url: "record.jsp"
注意：如果您仍然更喜欢使用外部页面，只需更改template: $("#record-jsp").html()：url: "record.jsp"
