I am trying to implement tree structure using bination of knockout.js and jquery-mobile-ui collapsible-set. Since tree can be substantially large, I am using 'if' bindings to prevent data processing before tree node is expanded. When tree node is expanded I want to use virtual knockout binding, using normal binding produces side effects in jquery-mobile-ui. When I expand node I can see
<!-- ko data-bind= template: { name: 'treeTemplate', foreach: $parent.Children } --><!-- /ko -->
I don't get any binding errors, however template is not being rendered. I can see that element is bound by calling
ko.contextFor($('.sss').contents().filter(function(){ return this.nodeType == 8;})[0]);
and it has $parent.Children not empty (Screenshot). Question: Is virtual template binding is supported in knockout.js and if it is what am I doing wrong? Any help or ideas how to debug current situation will be much appreciated.
I am trying to implement tree structure using bination of knockout.js and jquery-mobile-ui collapsible-set. Since tree can be substantially large, I am using 'if' bindings to prevent data processing before tree node is expanded. When tree node is expanded I want to use virtual knockout binding, using normal binding produces side effects in jquery-mobile-ui. When I expand node I can see
<!-- ko data-bind= template: { name: 'treeTemplate', foreach: $parent.Children } --><!-- /ko -->
I don't get any binding errors, however template is not being rendered. I can see that element is bound by calling
ko.contextFor($('.sss').contents().filter(function(){ return this.nodeType == 8;})[0]);
and it has $parent.Children not empty (Screenshot). Question: Is virtual template binding is supported in knockout.js and if it is what am I doing wrong? Any help or ideas how to debug current situation will be much appreciated.
Share Improve this question edited Apr 23, 2014 at 16:11 Matas Vaitkevicius asked Apr 23, 2014 at 16:02 Matas VaitkeviciusMatas Vaitkevicius 61.6k37 gold badges248 silver badges276 bronze badges1 Answer
Reset to default 15Skip the data-bind= in your virtual element, just do
<!-- ko template: { name: 'treeTemplate', foreach: $parent.Children } --><!-- /ko -->
Just a quick tip for reading up on debugging: http://www.knockmeout/2013/06/knockout-debugging-strategies-plugin.html