13

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

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

4

1 回答 1

25

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

  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"

于 2013-01-24T15:50:40.453 回答