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

Question

我有一个剑道窗口，里面有一个表格。该表单具有输入元素，其中填充了记录的数据。用户可以关闭窗口并选择不同的记录来查看。当用户这样做时，我需要使用相同的表单但使用不同的记录数据再次显示剑道窗口。这是我目前正在做的事情

    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"