绑定Kendo Grid与Knockout:将配置在javascript工作

Bind Kendo Grid with Knockout: will config in javascript work with

本文关键字:配置 javascript 工作 Kendo Grid Knockout 绑定      更新时间:2023-09-26

我看到过几个使用knockout绑定剑道网格的例子,其中网格配置是在视图模型中定义的。我真的很喜欢这种风格和它所允许的干净标记。然而,我似乎不能让usekotemplates选项工作。

这是我的标记:

<div data-bind='kendoGrid: gridConfig'></div>
<script id="clientRowTemplate" type="text/html">
    <tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: State"></td>
        <td>
            <input type="hidden" data-bind="value: Id" />
            <a href="#">Edit</a>
            <a href="#">Delete</a>
        </td>
    </tr>
</script>

这是我的视图模型

var clientListViewModel = function () {
    var self = this;
    self.clients = ko.observableArray([]);
    self.load = function () {
        for (var i = 0; i < 9; i++) {
            var c = new clientModel();
            c.Id = i;
            c.Name = 'Name' + i;
            c.State = 'NY';
            self.clients.push(c);
        };
    };
    self.gridConfig = {
        data: self.clients,
        datasource: {
            data: "data",
            schema: {
                model: {
                    fields: {
                        ID: { type: "number" },
                        Name: { type: "string" },
                        State: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true
        },
        height: 400,
        pageable: true,
        selectable: "row",
        usekotemplates: true,
        rowtemplate: "clientRowTemplate",
    };
};
var clientModel = function () {
    var self = this;
    self.Id = ko.observable(0);
    self.Name = ko.observable("").extend({ required: true });
    self.State = ko.observable("").extend({ required: true });
};

var vm = new clientListViewModel();
vm.load();
ko.applyBindings(vm);

这是一个jsfiddle: http://jsfiddle.net/Steve5877/a4kG7/2/

我可以这样绑定它而仍然使用模板吗?

看起来你只需要注意你传递的几个选项的大小写敏感性:

    useKOTemplates: true,
    rowTemplate: "clientRowTemplate",

而不是:

    usekotemplates: true,
    rowtemplate: "clientRowTemplate",