Knockout.js + Bootstrap Tour

Question

I would like to use Knockout.js with Bootstrap Tour. In particular, I would like to attach some data bound click handler to a button within a tour step.

I create a simple tour like this:

var tour = new new Tour({
    steps: [
        {
            orphan: true,
            title: "Help Title",
            content: "<button data-bind='click: someBoundFunction'>Click me!</button>"
        }
    ]
});
tour.init();
tour.start(true);

Is it possible to use this kind of binding? Or won't this binding work because of the markup code creation mechanism of bootstraptour? I tried it like this but clicking on the button does not execute the function neither is any error message shown.

score 3 · Accepted Answer · edited May 23 '17 at 10:26

Knockout doesn't update bindings automatically for newly added elements. There is a workaround though, see this question (and related). Below is a possible solution based on this workaround.

So you have a main view model, which starts your tour:

function ViewModel(){
    var self = this;
    this.tour = new Tour({ 
        steps: [
            {
                orphan: true,
                title: "Help Title",
                content: '<button id="newButton" data-bind="click: showMessage">showMessage</button>',
                onShown: function(tour) {
                    // apply the bindings after content is added
                    ko.applyBindings(self, document.getElementById("newButton"));
                }
            }
        ]
    });
    this.startTour = function() {
        this.tour.init();        
        self.tour.start(true);        
    }
    this.showMessage = function() {
        alert('Hello!');
    }
}

Working demo.

Thanks, this would work. What about the `onShown`Function? Could this save the timeout hack? — Michael Hilus, Sep 18 '14 at 07:16
@MichaelHilus, nice point, how could I miss that. I've updated my answer to use `onShown` event handler without any dirty hacks, thank you! — Ilya Luzyanin, Sep 18 '14 at 07:48

Knockout.js + Bootstrap Tour

1 Answers1

Working demo.