asp.net - Knockout-Kendo.js 可编辑模板

Question

我在 Durundal.js 中使用 Knockout-Kendo.js

单击“编辑”和“添加”按钮时，如何绑定自定义可编辑模板或调用自定义 HTML。

我尝试了以下代码但无法正常工作

<div data-bind="kendoGrid: { data: items, editableTemplate: 'editTemplate',  useKOTemplates: true }"> </div>
    <script id="editTemplate" type="text/html">
        <h3>Edit User</h3>
        <p>
            <label>User Name:<input data-bind="text:username" /></label>
        </p>        
    </script>

用于敲除绑定的Viewmodel.js 文件

define(['services/logger', 'config', 'services/dataservice'], function (logger, config, dataservice) {

    var title = 'Users';
    var items = ko.observableArray();

    var vm = {
        items: items,
        activate: activate,
        title: title
    };

    return vm;

    //#region Internal Methods


    function activate() {
        dataservice.getUsers(vm.items);

        ko.bindingHandlers.kendoGrid.options = {
            dataSource: {
                schema: {
                    model: {
                        fields: {
                            firstName: { type: "string" },
                            lastName: { type: "string" },
                            username: { type: "string" },
                            company: { type: "string" },
                            addressLine1: { type: "string" },
                            addressLine2: { type: "string" },
                            city: { type: "string" },
                            state: { type: "string" },
                            postCode: { type: "string" },
                            phoneNumber: { type: "string" },
                            website: { type: "string" },
                            vatNumber: { type: "string" },
                            registrationNumber: { type: "string" },
                            creadtedBy: { type: "string", editable: false, nullable: true, hidden: true },
                            createdOn: { type: "date", editable: false, nullable: true, hidden: true },
                            modifiedBy: { type: "string", editable: false, nullable: true, hidden: true },
                            modifiedOn: { type: "date", editable: false, nullable: true, hidden: true },
                        }
                    }
                },
                pageSize: config.gridPageSize
            },
            toolbar: config.gridToolbar,
            height: config.gridHeight,
            columns: [
                { field: "firstName", title: "First Name", width: "90px" },
                { field: "lastName", title: "Last Name", width: "90px" },
                { field: "company", title: "Company", width: "90px" },
                { field: "username", title: "User Name", width: "90px" },
                { field: "addressLine1", title: "Address Line1", width: "90px" },
                { field: "addressLine2", title: "Address Line2", width: "90px" },
                { field: "city", title: "City", width: "90px" },
                { field: "state", title: "State", width: "90px" },
                { field: "postCode", title: "Post Code", width: "90px" },
                { field: "phoneNumber", title: "Phone Number", width: "90px" },
                { field: "website", title: "Website", width: "90px" },
                { field: "vatNumber", title: "Vat Number", width: "90px" },
                { field: "registrationNumber", title: "Registration Number", width: "90px" },
                { field: "creadtedBy", title: "Created By", width: "130px" },
                {
                    field: "createdOn",
                    title: "Created On",
                    width: "130px",
                    format: "{0:MM/dd/yyyy HH:mm tt}",
                    filterable: {
                        ui: "datetimepicker"
                    }
                },
                { field: "modifiedBy", title: "Modified By", width: "130px" },
                {
                    field: "modifiedOn",
                    title: "Modified On",
                    width: "130px",
                    format: "{0:MM/dd/yyyy HH:mm tt}",
                    filterable: {
                        ui: "datetimepicker"
                    }
                },
                { command: ["edit", "destroy"], title: " ", width: "160px" }
            ],
            editable: config.gridEditableType
        };

    }

    //#endregion
});