何が悪いのかを理解しようとしてきました。私が行った実装は、Github Wiki ページhttps://github.com/browserstate/history.js/wikiの例に厳密に従っています
以下のコードサンプル。どんな助けでも大歓迎です。乾杯!
$(document).ready(function() {
var History = window.History;
$.expr[':'].internal = function(obj, index, meta, stack){
var rootUrl = History.getRootUrl()
var
$this = $(obj),
url = $this.attr('href')||'',
isInternalLink;
isInternalLink = url.substring(0,rootUrl.length) === rootUrl || url.indexOf(':') === -1;
return isInternalLink;
};
URB = {
bootstrap: function() {
URB.cleanUpDomForInit();
URB.ajaxifyLinks('body');
URB.ajaxifySelectBox('body');
$(window).bind('statechange', function() {
var State = History.getState();
var html = '<div class="twelve columns">'+State.data.content+'</div>';
URB.updateBelly(html);
});
// Initialize Model
URB.loadExternalJS(base_url + 'javascripts/URB/URB.Model.js');
var checkModel = setInterval(function() {
if(typeof URB.Model != 'undefined') {
URB.Model.proxy('api/article', null, null, function(data) {
console.log(data);
});
clearInterval(checkModel);
}
}, 100);
},
belly:
$("#belly"),
isMobile:
window.matchMedia('only screen and (max-width: 767px)').matches ? true : false,
isTablet:
window.matchMedia('only screen and (min-width: 768px) and (max-width: 1024px)').matches ? true : false,
isDesktop:
window.matchMedia('only screen and (min-width: 1025px)').matches ? true : false,
loadExternalJS: function(url) {
$.ajax({
type: "GET",
url: url,
dataType: "script"
});
},
updateBelly: function(html) {
URB.belly.html(html);
},
ajaxifyLinks: function(elm) {
var $this = $(elm);
$this.find('a:internal:not(.no-ajaxy)').click(function(e) {
if(e.which == 2 || event.metaKey)
return true;
var
$this = $(this),
url = $this.attr('href'),
title = $this.attr('title') || null;
var stateData = {
content: title
};
History.pushState(stateData, title, url);
var html = '<div class="twelve columns">'+stateData.content+'</div>';
URB.updateBelly(html);
e.preventDefault();
return false;
});
},
ajaxifySelectBox: function(elm) {
var $this = $(elm);
$this.find('select.ajaxify').change(function(e) {
var
$this = $(this),
url = $this.val(),
title = $this.children("option:selected").text();
if($this.children("option:selected").attr('data-open-new-window') == 1) {
console.log("Open in new window: " + url);
}
else {
var stateData = {
content: title
};
History.pushState(stateData, title, url);
console.log(title);
var html = '<div class="twelve columns">'+stateData.content+'</div>';
URB.updateBelly(html);
}
e.preventDefault();
return false;
});
},
cleanUpDomForInit: function() {
if(URB.isMobile) {
URB._cleanDom(functionRegistrations.mobile, '.show-for-medium, .show-for-large, .show-for-large-up, .show-for-medium-down, .show-for-xlarge');
}
if(URB.isTablet) {
URB._cleanDom(functionRegistrations.tablet, '.show-for-large, .show-for-large-up, .show-for-xlarge, .show-for-small');
}
if(URB.isDesktop) {
URB._cleanDom(functionRegistrations.desktop, '.show-for-small');
}
},
_cleanDom: function(elms, css) {
$(css).each(function(index, elm) {
$(elm).remove();
});
for(i in elms) {
elms[i]();
}
}
};
URB.bootstrap();
});