kendo ui - managing viewmodel between multiple views

[Valay]

I am building SPA. I've 3 screens(views): add-customer, add-customer-details, customer-list. add-customer is working fine with vm for it. User will be redirected to add-customer-details after adding customer with basic details. So I am changing view when clicks on "Next" button on add-customer view. All views are loaded with templates.

var addCustomerView = new kendo.View($('#add-customer-view-template').html(), {model: customerAdd});

var addCustomerDetailsView = new kendo.View($('#add-customer-details-view-template').html(), {model: customerAdd});

var customerAdd = kendo.observable({
    // properties and methods
    });

add-customer-details has kendo ui tabstrip with multiple forms. Currently I am trying to bind viewmodel customerAdd to both views. But the issue is details view has different controls compared to add-customer view.

So I couldn't bind viewmodel customerAdd to it. I couldn't bind kendo ui controls to viewmodel customerAdd.
I want to maintain one viewmodel for the whole process of adding customer with basic and with details.

How do I use viewmodel customerAdd for all three available views (add-customer, add-customer-details, customer-list) ??? And if it's not possible, what is the best way to accommodate and share all details in viewmodel to share it between multiple views ???

[Petyo]

Hi Valay,

In general view models may be shared between views. However, this is not a practical solution due to the limitations you have encountered. Instead, I may recommend that you share the common data structures (like the DataSource you will operate on) and assign them as fields to both view models. 

Regards,
Petyo
Telerik