Kendo MVVM - Viewmodel inside Another

Question

Is it possible to bind one Viewmodel within another? If yes, how?

I need to create a context more or less like this:

<div data-bind="visible: ViewModel_1.isVisible" />
    //....

    <div data-bind="source: ViewModel_Child1/>
         // Contexto referente ao filho 1 da viewModel
    </div>

    <div data-bind="source: ViewModel_Child2/>
         // Contexto referente ao filho 2 da viewModel
    </div>

    <div data-bind="source: ViewModel_ChildN/>
         // Contexto referente ao filho N da viewModel
    </div>
</div> 

It would be a kind of class structure:

public Pessoa {
     public List<Contato> Contatos { get; set; }
     public List<Referencia> Referencias { get; set; }
     public List<Mensagem> Mensagens { get; set; }
}

And each List will have a Grid... because it will be a screen with several tabs

[Pessoa] | [Contato] | [Referencia] | [Mensagem] --- // onde | no exemplo seria um separador ou aba

And it will be a record controlled by the same screen, in different controllers... hence the pq to not need to make a complex viewModel to store each dataSource of each tab... wanted to bind one for each, but having the Pessoa as Father

Answer 1

I found the solution.

When to try to do Nested Binds, shall be followed in the following manner:.

//....

<div  id="nested" data-bind="source: ViewModel_Child1/>
     // Contexto referente ao filho 1 da viewModel
</div>

no js:

var viewModelPai = kendo.Observable.observable({..});
var viewModelFilho = kendo.Observable.observable({..});

//e os binds devem ser atribuído assim

kendo.bind($("#pai").children().not("#filho"),viewModelPai);

//na diretiva acima, manda construir o bind MVVM na `div#pai` ignorando a `div#filho`
//dentro dela, permitindo assim um novo bind dentro dessa como é feito abaixo

kendo.bind($("#filho"),viewModelFilho);