如何在kendo mvvm中使用复杂模型

Question

我正在为我的项目使用kendo mvvm框架。 主要思想是 - 我试图在不同的地方重用CustomerComboboxViewModel模型。 我有下一个代码：

＆＃13;

＆＃13;

var CustomerComboboxViewModel = kendo.data.ObservableObject.extend({
    selected: null,
    customers: new kendo.data.DataSource({ // scheme description })
});

var NewProjectDialogViewModel = kendo.data.ObservableObject.extend({
    customerControlViewModel: new CustomerComboboxViewModel()   
});

var PageViewModel = kendo.data.ObservableObject.extend({
    
    customerControlViewModel: new CustomerComboboxViewModel(),
    dialogViewModel: new NewProjectDialogViewModel(),
    
    init: function(){
      that.get("customerControlViewModel")
          .customers
          .data([// some date her]);
      }
    
});


$("#page").bind(new PageViewModel())

＆＃13;

<div id="page">
    <input
    data-role="combobox"
    data-bind="source: customerControlViewModel.customers, value: customerControlViewModel.selected"
    data-text-field="companyname"
    data-value-field="id" />
    
     <div id="newProjectDialog"
            data-role="dialog"            
            data-modal="true">

                <input
                    data-role="combobox"
                    data-text-field="companyname"
                    data-value-field="id"
                    data-bind="source: dialogViewModel.customerControlViewModel.customers, value: dialogViewModel.customerControlViewModel.selected }"
                     />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

调用init函数后 - 我的两个模型（customerControlViewModel，dialogViewModel）将填充相同的数据。我不明白他们是如何相互联系的。

Answer 1

使用此

var CustomerComboboxViewModel = kendo.data.ObservableObject.extend({
    selected: null,
    customers: new kendo.data.DataSource({ // scheme description })
});

var NewProjectDialogViewModel = CustomerComboboxViewModel .extend({
       
});

var PageViewModel = kendo.data.ObservableObject.extend({
    dialogViewModel: new NewProjectDialogViewModel(),
   customers: new kendo.data.DataSource(),
    selected: null,
    init: function(){
        this.set("customers",  this.get("dialogViewModel.customers");
         this.set("selected",  this.get("dialogViewModel.selected");
      }
    
});

$("#page").bind(PageViewModel);

<div id="page">
    <input
    data-role="combobox"
    data-bind="source: customers, value: selected"
    data-text-field="companyname"
    data-value-field="id" />
    
     <div id="newProjectDialog"
            data-role="dialog"            
            data-modal="true">

                <input
                    data-role="combobox"
                    data-text-field="companyname"
                    data-value-field="id"
                    data-bind="source: customers, value: selected }"
                     />
    </div>
</div>