How to bind Parent/Sub-Elements correctly?

[fbaptiste]

I have the following Scenario

HTML
<div id="dashboard" data-bind="visible: isVisible">
    <div id="widget1" data-bind="visible: isVisible">
    <div id="widget2" data-bind="visible: isVisible">
</div>

JS
 $(function () {
    var dashboardVM: ObservableObject{
        isVisible: true
    };
    kendo.bind('$("#dashboard")', dashboardVM);

    var widgetVM: ObservableObject{
        isVisible: false
    };
    kendo.bind('$("#widget1")', widgetVM);
 }

My intention is that dashboard and any unbinded sub element are binded to DashboardVM fields, UNLESS there is a specific VM binded to that sub element. in this case 'widget1' fields binded should come from widgetVM.

[Petyo]

Hi Fred,

binding the same tree to multiple view models is not a supported scenario (and, I would not recommend it for that matter). The recommended approach in this case is to create a composite view model, which will hold the fields for each section. 

Regards,
Petyo
Telerik

 

 

[fbaptiste]

Could you please post a recommended example for this based on the scenario that i have?

[Petyo]

Hello,

If I understand your requirements correctly, something like this should do the trick.

Regards,
Petyo
Telerik