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

问题描述

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

 if (!$("#winContainer").data("kendoWindow")) {$("#winContainer").kendoWindow({模态:真，宽度:969px"，高度:646px"，title: "查看记录",内容:记录.jsp"});} 别的 {$("#winContainer").data("kendoWindow").refresh({url: 'record.jsp'});}$("#winContainer").data("kendoWindow").center().open();

该表单包含在 record.jsp 中，我用之前从服务器接收的 JSON 数据填充它(通过在 record.jsp 中引用的 JavaScript).我需要确保在表单中填充新记录数据之前不会显示该窗口.这是正确的方法还是有更好的方法?

解决方案

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

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

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

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

示例:

给定以下用户可选择的记录:

var 数据 = [{ 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 的模板的表单:

我们的 JavaScript 将类似于:

//窗口初始化var kendoWindow = $("<div id='window'/>").kendoWindow({title : "记录",可调整大小:假，模态:真，可见:假，内容  : {模板:$("#record-jsp").html()}}).data("kendoWindow");

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

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

最后用数据调用函数.

openForm(data[0]);

你可以看到它在这个 JSFiddle

上运行

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

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();   

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. Create a window,
2. Each the user selects a new record, bind the new data to the window and then open it.

This way you only need to load the page once.

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

Example:

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" }
];

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>

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]);

You can see it running on this JSFiddle

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

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