internet explorer - Sammy.js routes not firing from Knockout-bound links in IE10 -
i have single page application uses knockout.js data binding , sammy.js routing client-side (hash-based) urls.
i'm seeing weird problem in internet explorer, however: links, when clicked, change url in browser's address bar, corresponding sammy route not execute.
it doesn't happen every time (but can consistently reproduce error), , happens in ie10 (chrome works fine every time). appears related knockout well, since set of hard-coded links don't exhibit same problem.
to illustrate, i've stripped away bare minimum recreate problem , created 2 jsbin examples:
example 1 (with knockout): http://jsbin.com/aretis/2/
to see problem, open link above , click "record #1", "baz", "record #1" again. url record 1 appear in address bar, route record not appended list.
example 2 (without knockout): http://jsbin.com/amivoq/1/
in example, have static list of record links instead of data-bound list. clicking on of links (in order) result in route being appended list (as should).
a reminder these must run in ie reproduce problem.
any ideas?
as per comment above, worked around problem catching window.hashchange event , parsing out url myself. part of sammy.js using , wasn't having luck tracking down actual problem. hopefully, else.
the first thing did bind hashchange event:
$(function () { $(window).on("hashchange", handleurl); // call our url handler deal initial url given us. handleurl(); }
this calls following url parser:
function handleurl() { var hash = location.hash; if (hash.indexof("#account") >= 0) { var splitparts = hash.split("/"); if (splitparts.length >= 2) { showloadingbox(); showaccountdetailfromid(splitparts[1]); } } else if (hash.indexof("#contact") >= 0) { var splitparts = hash.split("/"); if (splitparts.length >= 2) { showloadingbox(); showcontactdetailfromid(splitparts[1]); } } else if (hash.indexof("#thingstodo") >= 0) { switchtopanel("navpanelthingstodo"); } else if (hash.indexof("#thingsivedone") >= 0) { switchtopanel("navpanelthingsivedone"); } else if (hash.indexof("#reports") >= 0) { switchtopanel("navpanelreports"); } else { switchtopanel("navpanelmyaccounts"); } }
the functions showaccountdetailfromid()
, switchtopanel()
show , populate (using ajax calls web services) appropriate <div>
. naive approach, working (i.e. can bookmark urls, button , browser history work, etc.) apologies non-answer "answer".
Comments
Post a Comment