什么是新的内容加载到剑道窗口的正确方法？(What is the proper way to loa

我有一个内部具有形式的剑道窗口。 形式有其内填充的记录的数据输入元件。 用户可以关闭该窗口，并选择不同的记录进行查看。 当用户这样做，我需要用相同的形式，但不同的记录数据再次表明了剑道窗口。 下面是目前我在做什么

    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内，并且我与我先前从服务器接收（通过JavaScript在record.jsp引用）JSON数据填充它。 我需要确保窗口不显示，直到新的记录数据的表格填充。 这是为了做到这一点，正确的方法或者是有一些更好的办法？

Answer 1:

相反，每次创建一个新窗口或刷新它的内容，我建议：

1. 创建一个窗口，
2. 每次用户选择一个新的记录，绑定新数据到窗口，然后打开它。

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

你也可以考虑具有页面record.jsp定义为在原始页面中的剑道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"

文章来源: What is the proper way to load new content into a kendo window?