Binding to multiple view models nested in the Dom.

[James]

Hi,

I am trying to bind a model to a higherlevel element and then later bind another model to something nested deeper in the dom.

When I do this, i get the following stack trace:

1. Uncaught TypeError: Cannot read property 'parent' of undefined kendo.all.js:8419
   1. binders.source.Binder.extend.renderkendo.all.js:8419
   2. binders.source.Binder.extend.refreshkendo.all.js:8332
   3. Class.extend.bindkendo.all.js:8158
   4. Class.extend.applyBindingkendo.all.js:8954
   5. Class.extend.bindkendo.all.js:8930
   6. bindElementkendo.all.js:9152
   7. bindElementkendo.all.js:9161
   8. bindElementkendo.all.js:9161
   9. bindElementkendo.all.js:9161
   10. bindElementkendo.all.js:9161
   11. bindElementkendo.all.js:9161
   12. bindElementkendo.all.js:9161
   13. bindkendo.all.js:9175
   14. window.CubeBrowserModelBinder.CubeBrowserModelBinder.bindcubebrowser.model.binder.js:15
   15. CubeBrowserModelBindercubebrowser.model.binder.js:7
   16. CubeBrowsercubebrowser.main.js:6
   17. (anonymous function)59:478
   18. jQuery.Callbacks.firejquery-1.8.3.js:974
   19. jQuery.Callbacks.self.fireWithjquery-1.8.3.js:1084
   20. jQuery.extend.readyjquery-1.8.3.js:406
   21. DOMContentLoaded

Which looks to be caused by my 2nd view using data-bind to source and then  a template

I have tried to replicate it here: http://jsbin.com/iyayuk/7/edit and that gives me a different error but i believe it is close to the same problem.

1. Uncaught TypeError: Cannot call method 'replace' of undefined kendo.all.min.js:9
   1. Template.compilekendo.all.min.js:9
   2. p.isFunction.fjquery-1.8.2.min.js:2
   3. parseOptionskendo.all.min.js:9
   4. akendo.all.min.js:11
   5. akendo.all.min.js:11
   6. akendo.all.min.js:11
   7. akendo.all.min.js:11
   8. akendo.all.min.js:11
   9. skendo.all.min.js:11
   10. (anonymous function)edit:21
   11. f

I noticed this one: http://www.kendoui.com/forums/framework/mvvm/nested-views-bindings.aspx but i dont think i can see a way to get a jquery selector to correctly exclude the deeper elements.

But beyond that I would not expect the code to throw an error.

Appreciate your help on this

Thanks

James.

[Daniel]

Hello James,

The error in the jsBin is thrown because the templates are not yet initialized when binding the viewModel. You should bind the viewModel in the document ready event or move the script after the templates in order to avoid it.
Regarding the error with the binding - it occurs because the source binding always requires initial value. The deeper elements only cannot be excluded and you should either exclude "cubebrowserpanes" from the binding or add the "gridPane" content(or attributes) dynamically after the main viewModel is bound. I update the sample to show one possible approach.

Regards,
Daniel
the Telerik team

[James]

Thanks for the response Daniel, doing the trick of putting the whole 2nd view into a template did the trick for me.