Search code examples
javascripthtmlkendo-uisingle-page-applicationkendo-mvvm

Binding properties of different viewmodels to eachother


Is there a way to bind two properties of different viewmodels to eachother using kendo mvvm or do I have to write the code of the change event myself?

UserViewModel = {
    init: function(e) {
    },
    show: function(e) {
    },
    model: {
       isLoggedIn: kendo.observable(false)
    }
}

OtherContextViewModel = {
    init: function(e) {
    },
    show: function(e) {
    },
    model: {
       UserIsLoggedIn: //bind to isLoggedIn of the UserViewModel
    }
}

The reason I am trying to do this: I want to hide and show several things in the OtherContextdepending on whether the user is logged in or not. It could be taken a bit further when talking about usergroups and privileges. Can anyone give me an example or another approach in case this is not the right approach and/or maybe bad practice?


Solution

  • Hi I think that the mediator pattern might be what you are looking for, its ideal for sending messages between view models without directly referencing them. CodeProject has a tutorial showing how to achieve the mediator pattern.

    http://www.codeproject.com/Articles/35277/MVVM-Mediator-Pattern

    Suppose we have 2 ViewModels: 1. LoginViewModel 2. MainViewModel

    We register the MainViewModel to the mediator message UserLoggedIn

    Mediator.Instance.Register(
       (Object o) =>
       {
         UpdateView(o as loggedInBoolean);
       }, Mediator.ViewModelMessages.UserLoggedIn);
    

    When the user logs in via the LoginViewModel we send a message to the mediator message UserLoggedIn.

    public void LoggingIn()
    {     
    Mediator.Instance.Notify(Mediator.ViewModelMessages.UserLoggedIn, null);
    }
    

    Sending this message will then fire the UpdateView(loggedInBoolean) method which you could then use to change any properties etc in the MainViewModel.

    Summary: Mediator passes messages between viewModels. The viewModel you want to change a property, kick off a function etc registers to a message. Another viewModel can then send a message to all classes that are registered to that particular message.

    Hope that helps.