Question

我有一个剑道窗口，里面有一个表单。表单包含输入元素，其中填充了记录的数据。用户可以关闭窗口并选择要查看的其他记录。当用户执行此操作时，我需要使用相同的表单但使用不同的记录数据再次显示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

我建议不要每次都创建一个新窗口或刷新其内容，我建议：

创建一个窗口，
每个用户选择一条新记录，将新数据绑定到窗口然后再打开它。

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

您可能还会考虑在原始页面中将页面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"

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

1 个答案: