Kendo UI MVVM 多模型

如果我们将Kendo UI控件封装到Asp.Net的局部视图中，作为公用的组件，那么这个组件就应该不影响其它组件，也不受其它组件影响，这种情况下，采用Kendo UI的MVVM可以避免标签ID重复等问题，这时候，一个组件就需要一个独立的MVVM模型，比如下面的代码：

                   <div id="divGrid1">
                        <div id="recordgrid" class="grid"
                             data-role="grid"
                             data-sortable="true"
                             data-toolbar="['create']"
                             data-bind="source: recordSource"
                             data-editable='{"mode": "popup" }'
                             data-columns='[
                                  {"field":"Name","title":"名称", "width:": "200px"},
                                  {"field":"Description","title":"说明", "width:": "200px"},
                                     {"command": [ "edit", "destroy" ], "filterable": false, "sortable": false, "width:": "240px"}
                                     ]'
                             data-scrollable="false">
                        </div>
                    </div>
                    <script>
                        var vmgrid1;
                        $(document).ready(function () {
                            vmgrid1 = kendo.observable({
                                recordSource: new kendo.data.DataSource(
                                    {
                                        data: [
                                            { Name: "张三", Description: "测试" },
                                            { Name: "李四", Description: "开发" }
                                        ],
                                        schema: {
                                            model: {
                                                id: "Name",
                                                fields: {
                                                    Name: { validation: { required: true } },
                                                    Description: { validation: { required: true } }
                                                }
                                            }
                                        }
                                    }),

                            });

                            kendo.bind($("#divGrid1"), vmgrid1);
                        });


                    </script>

上面的代码是网格组件生成的实例，网格外部的div的id和模型的名称是动态生成的，在同一页面上不能重复，div内部的控件，由于采用模型进行控制，不受id的限制。这种情况下，一个页面上由多个互相独立的VM模型。