I am observing very peculiar behaviour, when testing system on Samsung tablet some of links stopped working. To make it easier to debug I am using Chrome Developer tools emulator, when page is loaded I can call kncoukout.js global ko
from console for debugging (like getting context for bound elements...) thing is when I am trying to debug from event handler ko
vanishes.
Have a look at screenshot below.
I have been able to access ko
when not in callback,
then I placed breakpoint in event handler and tried to access ko
again on a
click
and it's not there anymore, and then it fails with error of ko
not being there.
What is going on, how can ko
just disappear?
Not that I think it matters (same happens in any event handler), but someone will ask for code that makes ko
disappear.
var parseHrefBinding = function (link) {
var newHref = null;
var boundEl = $(link).closest('[data-bind]')[0];
if (boundEl) {
var data = ko.dataFor(boundEl);
if (data) {
var a = document.createElement('a');
a.setAttribute('data-bind', link.attributes['data-bind'].value);
ko.applyBindings(data, a);
newHref = a.href;
}
}
return newHref;
};
$(document).on("click", "a", function () {
var res = true;
var link = this;
var parent = $(link).parents('a')[0];
if (parent) {
// The default Android browser (V2-4.1) sets nested a[href] to their parent's href.
var href = parent.href === link.href ? parseHrefBinding(link) : link.href;
setTimeout(function () {
document.location.href = href;
}, 10);
res = false;
}
return res;
});
God this is epic, it turns out that to use globals in event handlers on Android Browser 4
one has to add window
in front of ko
eg. window.ko
see screenshot below.
so fix was as simple as changing
var data = ko.dataFor(boundEl);
to
var data = window.ko.dataFor(boundEl);