1

一直在试图找出问题所在。我所做的实现非常接近 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();
});
4

0 回答 0