Question

我正在尝试在我的应用程序中绑定一个简单的kendo窗口打开和关闭功能。

以下是HTML模板：

<div id="edit-user-window">
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="firstname">First Name</label>
                        <input type="text" name="firstname" class="form-control" data-bind="value: editUser.FirstName">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" data-bind="value: editUser.Email" required>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                    <button class="btn btn-default" data-bind="click: cancelEdit">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>

数据绑定以这种方式完成

function Model(app, popUp) {
    var ko = kendo.observable({
        self: this,
        dataSrc: null,
        editUser: {},
        init: function () {
            // Set up data source
            self.dataSrc = new kendo.data.DataSource({
                data: [],
                transport: {read: {url:, dataType:}},
                schema: {
                    model: { Name: "FirstName", Email: "Email"}
                }
            });

            // Define the user table
            $("#userGrid").kendoGrid({
                dataSource: self.dataSrc,
                columns: [
                    { field: 'FirstName', title: 'Name' },
                    { field: 'Email', title: 'Email' },
                    {
                        field: 'Operations',
                        width: "152px;",
                        command: [
                            {
                                name: 'edit',
                                template:"<a class='k-grid-edit' href='#' style='border-right:1px solid black;padding:5px;'>Edit</a>",
                                click: function (e) {
                                    e.preventDefault();
                                    $("#edit-user-window").data("kendoWindow").center().open();
                                    var tr = $(e.target).closest("tr");
                                    self.set("editUser",this.dataItem(tr));
                                }
                            }
                        ]
                    }
                ]
            });

            $("#edit-user-window").kendoWindow({
                width: "80%",
                height: "80%",
                title: "Edit User",
                visible: false,
                actions: [
                    "Close"
                ]
            });
        },
        cancelEdit: function (e) {
            $("#edit-user-window").data("kendoWindow").center().close();
        },
    });

    return ko;
}

当我使用点击按钮上的cancelEdit功能关闭窗口时，窗口有时会正常关闭，有时整个页面会刷新。没有有用的日志消息来调试问题。由于这将是一个单页的应用程序，重新加载是不能容忍的。

潜在问题可能与kendogrid中具有编辑操作的每一行有关。

PS：我是一个剑道新手所以这种方法可能存在缺陷。

Answer 1

如果将button元素放入表单，则默认情况下单击该表单时会发送该表单。为了防止它添加type =＆＃34; button＆＃34;属于取消按钮。

<button class="btn btn-default" type="button" data-bind="click: cancelEdit">Cancel</button>

kendo window close有时会重新加载页面（不一致）

1 个答案: