Kendo UI javascript：远程绑定表单

Posted 2021-04-05

我无法开始在Kendo UI中将表单绑定到远程数据源以获取javascript

我已经验证了ajax调用返回正确的JSONP有效负载，例如：

jQuery31006691693527470279_1519697653511([{"employee_id":1,"username":"Chai"}])

以下是代码：

    <script type="text/javascript">
    $(document).ready(function() {

        var viewModel = kendo.observable({
            employeeSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: baseUrl + "/temp1",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                        return options;
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "employee_id",
                        fields:{
                            employee_id: { type: "number" },
                            username: { type: "string" }
                        }
                    }
                }
            }),
            hasChanges: false,
            save: function() {
                this.employeeSource.sync();
                this.set("hasChanges", false);
            },
            change: function() {
                this.set("hasChanges", true);
            }
        });

        kendo.bind($("#item-container"), viewModel);

        viewModel.employeeSource.read();


    });
    </script>

<div id="item-container">

        <div class="row">
            <div class="col-xs-6 form-group">
                <label>Username</label>
                <input class="form-control k-textbox" type="text" id="username" data-bind="value: username, events: { change: change }" />
            </div>

        </div>

    <button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button>

</div>

没有错误被抛出，但我期待我的username文本表单字段填充值'Chai'，依此类推......但它没有

答案

您的文本框绑定到username属性，但这在您的视图模型上不存在，也不会在任何地方填充。假设您的数据源在调用read()后正确占用了一名员工，您需要将其解压缩并使用以下内容将其设置到您的viewmodel中：

change: function(e) {
    var data = this.data();
    if (data.length && data.length === 1) {
        this.set("employee", data[0]);
        this.set("hasChanges", true);
    }
}

并修改这样的绑定：

<input class="form-control k-textbox" type="text" id="username"
  data-bind="value: employee.username, events: { change: change }" />

您还应该知道在其他情况下会引发change事件，因此如果您开始使用数据源进行更新，则需要调整该代码以考虑请求的类型。有关更多信息，请参阅event documentation。希望这可以帮助。