Conditional KnockOut Binding

Development
1

Was wondering if someone could help me with knockout binding. I would like to make my BedLevelingWizard plugin usable in TouchUI, and it seems the quickest approach at this time is to have my view model as a tab. However, I don't want to bind the tab unless TouchUI is enabled/loaded and keep the sidebar in normal mode. I attempted a hack that I posted on here, but that appears to have caused some issues with TouchUI's autostart process. I have determined that I can check to see if TouchUI is enabled by using the following javascript code. Any help on conditional knockout binding would be greatly appreciated.

if($('html[id="touch"]').length > 0){
  // bind tab but not sidebar
}else{
  //bind sidebar but not tab
}
2

Can you give us an example of how you are binding currently?

In general you would either include or omit a ko.applyBindings call similar to this:

ko.applyBindings(self, document.getElementById('ID_OF_ELEMENT_TO_BIND_GOES_HERE'));

It might look something like this:

$(function() {
    MyViewModel = function(settings) {
        var self = this;
        // Declare your model here
        self.Variable1 = ko.observable(settings.SomeValue);
        ....
        if($('html[id="touch"]').length > 0){
            ko.applyBindings(self, document.getElementById('tab_id_here'));
        }else{
            ko.applyBindings(self, document.getElementById('sidebar_id_here'));
        }
}

However, you cannot bind objects twice, so you may have to tweak the automatic binding so that binding only occurs to elements that are NOT conditionally bound. See this page for more details.

3

Thanks @FormerLurker, I assume I'm only using the automatic binding, as I'm not applying binding anywhere in my js file. The knockout binding stuff is what I typically struggle with on my plugins the most, so any additional help would be greatly appreciated.