Question

I have done some research into this, but I am not particularly experienced with KO and JQM.

Obviously some custom bindings are required to get KO to play nice with some of the JQM controls. However I am not sure what the best design is when faced with the following problem.

I have a single index.html file, with separate data-role="page" divs.

As there is a lot of shared logic across the application, it wouldn’t necessarily make sense to have a separate view model for each page, so I currently have a single viewModel object which I am currently calling applyBindings on once. Naturally this happens once the first page is loaded.

The problem is that JQM doesn’t alter the elements on subsequent pages until the user navigates to them, the html remains unaltered at the point applyBindings is called. When the custom bindings are initialised, they are working on html that hasn’t been altered yet.

A simple example (without pasting in code) would be Knockoutjs, jquery mobile slider, calling slider('refresh') before JQM has created the slider itself.

I know that I can access the altered html in the pageinit event, but the problem is there are two interdependent events, the init event of the custom binding, and the pageinit event of the page the custom binding is used on. I am not sure what the best way around this is.

Initial ideas:

1. Just handle the discrepancy within each custom binding, I have seen this done in examples e.g. wrapping calls to refresh something that JQM initialises with a try…catch. Not sure I like this.

2. Split into separate html files. Not sure I like this either, as there is a lot of common data and it would hit performance.

3. Split the viewModel up and apply it to different elements, then only apply bindings for each page on their respective pageinit event. This would require a bit of redesign, as most of the view model is needed for every page.

4. Is there any way to force JQM to initialise a page in advance? If so, would this be a bad move?

5. Is there a way to control when KO custom bindings are initialised? The problem with that is you are effectively tailoring the custom bindings to individual pages.

6. Add bindings in Javascript e.g. https://groups.google.com/forum/?fromgroups=#!topic/knockoutjs/N33EzQ5nWUU. Not sure about this, doesn’t seem very clean.

Any other suggestions? How have people tackled this problem before?

Answer 1

In case it helps anyone, I have attempted option 1 for the slider (based on Knockoutjs, jquery mobile slider), with the following custom binding:

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        function setSliderValue(newValue) {
            var slider = $("#" + element.id);
            slider.val(newValue);
            slider.slider('refresh');
            slider.on('change', function () {
                valueAccessor()(slider.val());
            });
        }
        valueAccessor().subscribe(setSliderValue);
    }
};

With additional code to set my desired initial value for my observable only once the page has been initialised, e.g.

$("#myPage").on('pageinit', function () {
    viewModel.myPage.myObservable(1000);
});

This isn’t perfect, and it doesn’t solve the problems I will no doubt encounter with other controls as I explore the KO + JQM world further.

EDIT: tweaked the above, also added a binding for the JQM-generated back button (from data-add-back-btn="true"), which may come into some use:

ko.bindingHandlers.back = {
    init: function (element, valueAccessor) {
        function setBackBind(boundFunction) {
            $("#" + element.id)[0].children[0].children[0].id = element.id + "-backbutton";            
            $("#" + element.id + "-backbutton").on('click', ko.utils.unwrapObservable(valueAccessor()));
        }
        valueAccessor().subscribe(setBackBind);
    }
};

I then set the back button observable to the desired function on pageinit, at the same time as I set my slider observable