Kendo UI MVVM 不允许模型混合和嵌套

在使用Kendo UI MVVM封装组件时发现，布局类组件，比如tabstrip中如果嵌套了其它组件，会发生模型嵌套，比如：

    <div class="col-4">
        <div id="divtab2">
            <!--这里说明混合视图模型不可行，因为嵌套的视图模型可能由冲突-->
            <div data-role="tabstrip">
                <ul>
                    <li class="k-state-active">分页1</li>
                    <li>分页2</li>
                </ul>
                <div>
                    <div id="divInput2">
                        这里是输入部分
                        <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
                        <label>First Name: <input data-bind="value: firstName" /></label>
                        <label>Last Name: <input data-bind="value: lastName" /></label>
                    </div>
                    <script>
                        var vM12 = kendo.observable({
                            firstName: "三",
                            lastName: "张"
                        });
                        kendo.bind($("#divInput2"), vM12);
                    </script>
                </div>
                <div>
                    <div id="divGrid2">
                        <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 vmgrid2;
                        $(document).ready(function () {
                            vmgrid2 = 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($("#divGrid2"), vmgrid2);
                        });


                    </script>
                </div>
            </div>
            <script>
                var vmtab2;
                $(document).ready(function () {
                    vmtab2 = kendo.observable({
                        firstName: "三1",
                        lastName: "张1"
                    });

                    kendo.bind($("#divtab2"), vmtab2);
                });
            </script>

        </div>

    </div>

上面的代码中VM12和vmtab2发生冲突，因为两个模型同时作用于相同的html元素，导致出现问题。在实践中，需要避免混合嵌套模型的使用。在上面的场景中，tabstrip可以使用jQuery的方式初始化：

               $(document).ready(function () {
                    $("#mytab1").kendoTabStrip();
                });