Nested views bindings

[Andriyan]

Hello.

I have some parent container which is bind to ViewModel#1. This container contains other child container that is bind to ViewModel#2.

I’m not sure yet, but it looks like whole content of child container is bind to ViewModel#1 ONLY.

Is it possible to have such type of binding (having nested views) in Kendo? Would it have some potential issues with binding in that case? (Ambiguous bindings, issues when perform binding, etc.)

If it is not possible, what approach would you recommend?

Thanks ahead,

Andriyan.

[Alexander Valchev]

Hi Andriyan,

To avoid potential problems I recommend you to exclude the child container during the initial binding (you may have to use a little more complex jQuery selector for this task). For your convenience I prepared a small example: http://jsbin.com/ipisuh/4/edit

Best regards,
Alexander Valchev
the Telerik team

[Andriyan]

Thank you.
That's great!

[Andriyan]

Hello again,

The solution proposed works great, but not for all the cases.

In case if parent container which has children to be excluded it is Kendo widget and it needs to be bind itself to View Model – we cannot exclude container from binding.

Kendo.bind traverses all children of container if we include it into binding. So jQuery selector doesn’t help here.

Real world example:

Kendo Tabstrip is bind to ViewModel and its widget properties are bind to appropriate properties in viewModel.

However tabs are loaded from other views which have own ViewModels.

Can you please recommend the solution here?

Thanks ahead,
Andriyan.

[Alexander Valchev]

Hi Andriyan,

I am afraid that I cannot understand the exact specification of your scenario. Generally speaking, what you would like to achieve is not supported - if you bind the widget's container twice, the widgets will be initialized twice (because they have data-role) which may cause troubles.

How do you load the TabStrip's content - via Ajax, from the HTML mark-up or from local JavaScript array? What is the problem to use a single View-Model? Could you please clarify this and if possible to provide a small but runnable example (probably in jsBin) that demonstrates your current implementation and problem you faced with. I will check it and do my best to suggest a workaround, if such is possible.

Thank you in advance for the cooperation.

Regards,
Alexander Valchev
the Telerik team

[Orest]

Hello Alexander,

 This is Orest, I’m working in the same team as Andriyan.

 Let me explain our case in the details: 

1. Kendo ASP.NET MVC wrappers are used in my solution
2. Kendo TabStrip is formed for every page dynamically, and tabs are separate ASP.NET MVC views
3. TabStrip has own viewModel that allows binding to tab selection events and other TabStrip properties.
4. Each view is bind to separate ViewModel and it contains own specific logic (Combining views into one viewModel is just impossible, as number of views is large)
5. Basically I want to load the TabStrip and Views with one request from server.

In this case I have issues with binding because Parent container is bind when it has Child views (tabs) inside of its DOM.

1. In case Views are loaded asynchronously after TabStrip is loaded – binding work, however that leads to other possible issues with asynchronous handling \synchronization of views, their logic, so on.

It really is painful.

So it’s better to load the TabStrip and Views with one request from server. However it’s not possible now because of binding issues.

Please take a look http://jsbin.com/ohozel/1/edit for simple example (with TabStrip and tabs). Of course it doesn’t reflect fully my case – as it has lots of Server-side logic. However it illustrates the issues with bindings on tabstrip.

The issue actually is because we cannot bind TabStrip itself to ViewModel ( without parsing the children).

If Kendo would provided Kendo.bind with “TraverseChildren” option – it would be great.

Regards,
Orest

[Daniel]

Hello Orest,

This is currently not supported. I can suggest to submit this as feature request in our user voice forum. If the idea is popular we will consider it for future versions. 
For now I can suggest either to add the tabstrip or its tabs content dynamically after the main viewModel is bound. If using Ajax to load the tabs content, I can suggest to force the content to be loaded after the tabStrip initialization:

var tabStrip = $("#tabstrip").data("kendoTabStrip");
tab.reload(tab.tabGroup.children());

and use the contentLoad event to determine when all tabs are loaded. Regards,
Daniel
the Telerik team