将新内容加载到剑道窗口的正确方法是啥？

Posted 2023-05-07

【中文标题】将新内容加载到剑道窗口的正确方法是啥？

【英文标题】：What is the proper way to load new content into a kendo window?将新内容加载到剑道窗口的正确方法是什么？

【发布时间】：2013-01-08 10:25:24

【问题描述】：

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

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

【参考方案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"

【讨论】：

感谢您向我展示这种方法。它在绑定复杂对象时起作用。使用这种方法需要对我的应用程序进行大量更改，但这绝对值得。我必须很快发布应用程序，所以它必须是下一个阶段的变化。再次感谢。

因此，对于此版本，如果您希望在 record.jsp 中准备最终页面内容，您始终可以添加某种参数，以允许 servlet 决定要呈现的内容。我的意思是，类似record.jsp?arg1=xyz&arg2=yzx&arg3=zxy。

感谢您在短期内为我提供了另一种选择和快速响应。我在我原来的方法上做了更多的工作，并认为它对于最初的版本会很好。但是你的方法肯定更好，我会在下一个版本中得到它。我只是希望我（被问到）在我开发的早期就知道你的方法。

@OnaBai：我在我正在开发的网站中使用了类似的东西，但我使用了另一种模板语法（使用#:Property# 表示法）。问题是在创建 kendoWindow 时我得到了一个未捕获的 ReferenceError（“属性未定义”）（这是合理的，因为当时窗口没有绑定到任何 dataItem）。你知道如何避免这种情况吗？

有人注意到滚动窗口似乎没有按预期工作吗？