javascript - Knockout.js + Bootstrap 之旅

Question

我想使用Knockout.js与 Bootstrap Tour 。特别是，我想将一些数据绑定(bind)点击处理程序附加到游览步骤中的按钮。

我创建了一个像这样的简单游览:

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);

可以使用这种绑定(bind)吗？或者由于 bootstraptour 的标记代码创建机制，此绑定(bind)不会起作用？我尝试了这样的操作，但是单击按钮不会执行该功能，也不会显示任何错误消息。

Answer 1

Knockout 不会自动更新新添加元素的绑定(bind)。不过有一个解决方法，请参阅此 question (和related)。以下是基于此解决方法的可能解决方案。

因此您有了一个主视图模型，可以开始您的游览:

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.