0

I am constructing a tree structure using jQuery mobile collapsible-set and binding data at different level of the tree on collapse expand event.

Data binding is working perfectly fine, but when user re-opens the tree, again binding happens and multiple binding error comes.

How to avoid this? I tried cleanNode and the !!ko.dataFor. Nothing is working..

Here is my code below. I am using stop binding because only on click of some node binding should be applied to only to that section.

HTML

<div id="tree"  data-role="collapsible-set" data-collapsed-icon="carat-d" 
     data-expanded-icon="carat-u" data-iconpos="right" 
     data-bind="foreach:FolderObject">             
    <div data-role="collapsible" class="Folder" data-inset="false"
         data-bind="attr:{'id':$index()}">
        <span style="margin-left:10px;" data-bind="text:DisplayName"></span>
            <!--Subtree-->
        <div data-bind="attr:{'id':'Jobs'+$index()} ">
        <!-- ko stopBinding: true -->
            <div data-bind="foreach:SubTreeObject" data-role="collapsible-set">
                <div data-role="collapsible" class="JobFolder" data-inset="false"
                     data-bind="attr:{'id':$index()}">
                    <span style="margin-left:10px;" data-bind="text:DisplayName">
                    </span>
                </div>   
            </div>
        <--/ko-->   
        </div> 
    </div>
</div>

JS

$('#tree').on('collapsibleexpand', '.Folder', function (evt) {  
    var id=this.id;
    var x = $('#Jobs' + id + ' ' + 'div[data-role="collapsible-set"]');
    ko.applyBindings(VM2, x[0]); // VM2 has 'SubTreeObject' data
});
GôTô
  • 7,974
  • 3
  • 32
  • 43
user1855588
  • 77
  • 1
  • 11
  • 1
    Don't try to clean and rebind. Bind once and update – GôTô Jun 24 '14 at 08:01
  • whenever user clicks on Top folder, the event gets called, and subsequent ' apply binding' code will be executed. I have shown only two level, i have tree which is of 5 levels. Data is fully dynamic which comes from service at each level. – user1855588 Jun 24 '14 at 08:08
  • 1
    It doesn't change the concept. Binding is about having a representation of your UI in a viewmodel. If you want to hide stuff, use the appropriate binding with a property in your viewmodel. If your data changes, update the viewmodel and the UI should update. – GôTô Jun 24 '14 at 08:11

0 Answers0