I have a custom knockout binding for tooltips, and sometimes this page loads fine, and several times I get this error in the binding.
$ (...). tooltip is not a function
I set a breakpoint in the section where this happens, and sometimes the jquery object does not have any bootstrap functions on it. I can only assume that this is a problem with the loading library load time on demand. As I said, this does not happen every time, and it seems that this happens much more often when I have the developer console open.
Here is my config request
requirejs.config({
waitSeconds: 200,
shim: {
"bootstrap": {
deps: ['jquery'],
exports: "$.fn.tooltip"
}
},
enforceDefine: true,
paths: {
jquery: 'jquery-1.11.3.min',
bootstrap: 'bootstrap.min',
moment: 'moment.min',
knockout: 'knockout.min',
appVM: 'appVM',
custombindings: 'custombindings'
}
});
And my binding
define(['knockout', 'jquery', 'bootstrap'], function (ko, $, bootstrap) {
ko.bindingHandlers.tooltip = {
init: function (element, valueAccessor) {
var local = ko.utils.unwrapObservable(valueAccessor()),
options = {};
ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
ko.utils.extend(options, local);
$(element).tooltip(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).tooltip("destroy");
});
},
options: {
'container': 'body',
'delay': { 'show': 1000, 'hide': 100 },
'animation': 'true'
}
};
});
My bindings bindings
define(['jquery', 'bootstrap', 'appVM', 'knockout', 'domReady!'],
function(jquery, bootstrap, appVM, ko) {
var vm = new appVM();
ko.applyBindings(vm);
});