将新内容加载到剑道窗口中的正确方法是什么? [英] What is the proper way to load new content into a kendo window?

问题描述

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

I have a kendo window that has a form inside it. The form has input elements with a record's data populated within it. The user may close the window and select a different record to view. When the user does this, I need to show the kendo window again with the same form but with different record data. Here's what I'm currently doing

    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).我需要确保在表单中填充新记录数据之前，该窗口不会显示.这是执行此操作的正确方法还是有更好的方法?

The form is contained within record.jsp, and I populate it with JSON data that I previously received from server (via JavaScript referenced in record.jsp). I need to ensure that the window does not show until the new record data is populated in the form. Is this the correct way to do this or is there some better way?

推荐答案

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

Instead of creating a new window each time or refreshing its content, I do recommend:

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

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

This way you only need to load the page once.

您还可以考虑在原始页面中将页面record.jsp定义为Kendo UI模板.

You might also consider having the page record.jsp defined as a Kendo UI template in your original page.

示例:

提供以下用户可选记录:

Given the following user selectable records:

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定义为模板的表单:

And a form defined as a template with the following 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类似于:

Our JavaScript would be something like:

// Window initialization
var kendoWindow = $("<div id='window'/>").kendoWindow({
    title    : "Record",
    resizable: false,
    modal    : true,
    viewable : false,
    content  : {
        template: $("#record-jsp").html()
    }
}).data("kendoWindow");

将数据绑定到窗口并打开它:

Bind data to the window and opening it:

function openForm(record) {
    kendo.bind(kendoWindow.element, record);
    kendoWindow.open().center();
}

最后使用数据调用该函数.

And finally invoking the function with the data.

openForm(data[0]);

您可以看到它在此 JSFiddle

注意::如果您仍然喜欢使用外部页面，只需将template: $("#record-jsp").html()更改为:url: "record.jsp"

NOTE: If you still prefer using the external page, just need to change template: $("#record-jsp").html() by: url: "record.jsp"

这篇关于将新内容加载到剑道窗口中的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！