kendoui MVVM的写法

使用viewModel绑定数据到html元素

                this.grid.data("kendoGrid").tbody.on("click", ".k-grid-editmy", function (e) {
                    e.preventDefault();
                    var dataItem = om.grid.data("kendoGrid").dataItem($(e.currentTarget).closest("tr"));
                    wnd = $("#form-edit")
                        .kendoWindow({
                            width: 600,
                            height: 500,
                            modal: true,
                            title: "修改",
                            visible: false,
                            resizable: false
                        }).data("kendoWindow");
                    wnd.center().open();
                    var viewModel = kendo.observable({
                            num: dataItem.num,
                            nickname: dataItem.nickname,
                            selectedRoles: ["1","2"],
                            roles: new kendo.data.DataSource({
                                transport: {
                                    read: {
                                        type: "get",
                                        url: "http://localhost/tp5/public/index.php/api/manageroles/readroles",
                                        dataType: "json",
                                        data: {access_token: layui.data('layuiAdmin').access_token}
                                    }
                                }
                            }),
                            update: function (e) {
                                console.log(viewModel.toJSON());
                            },
                            cancel: function (e) {
                                wnd.close();
                            }
                        }
                    );
                    kendo.bind($("#form-edit"), viewModel);

                });

弹框window的绑定写法

<div id="form-edit">
    <div class="layui-form-item">
        <label class="layui-form-label">登录名</label>
        <div class="layui-input-block">
            <input type="text" name="num" required lay-verify="required" data-bind="value:num" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" name="nickname" required lay-verify="required" data-bind="value:nickname"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属角色</label>
        <div class="layui-input-block">
            <select  data-role="multiselect" data-placeholder="请选择角色" data-value-primitive="true"
                    data-text-field="name" data-value-field="id" data-bind="value: selectedRoles,
              source: roles"
            ></select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" data-bind="events:{click:update}">保存</button>
            <button class="layui-btn layui-btn-primary" data-bind="events:{click:cancel}">取消</button>
        </div>
    </div>
</div>

这种用法适用于组件不太复杂的情况，因为组件的设置只能在js中设置，html中只能通过data-bind绑定数据，可能缺乏组件灵活性，这个有待研究。