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

Question

我有一个kendo窗口,里面有一个表单.表单包含输入元素,其中填充了记录的数据.用户可以关闭窗口并选择要查看的其他记录.当用户执行此操作时,我需要使用相同的表单但使用不同的记录数据再次显示kendo窗口.这就是我目前正在做的事情

    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)填充它.我需要确保在窗体中填充新记录数据之前不显示窗口.这是正确的方法吗？还是有更好的方法？

Answer 1

我建议不要每次都创建一个新窗口或刷新其内容,而是建议:

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():url: "record.jsp"