解决状态混乱

Question

我使用 Jquery 地址并按照以下示例构建了一个简单的深度链接页面：
http://www.asual.com/jquery/address/samples/state/

现在在这个例子中，一个 HTML5 浏览器（我使用 Chrome 10）显示了实际显示的源代码。 IE。 http://www.asual.com/jquery/address/samples/state/portfolio 在 content div 中显示 Portfolio content.，即使该内容是通过 Jquery 地址/Ajax/$('.content').html() 插入的。我重建了这个示例，但在我的页面上，源始终是初始页面之一，在执行任何 Ajax 之前。这与在非 HTML5 浏览器中的行为相同。
我做错了什么？
感谢您的提示，
托马斯

编辑：

这是演示代码：

<script type="text/javascript"> 

        $.address.init(function() {

            // Initializes the plugin
            $('.nav a').address();

        }).change(function(event) {

            // Selects the proper navigation link
            $('.nav a').each(function() {
                if ($(this).attr('href') == ($.address.state() + event.path)) {
                    $(this).addClass('selected').focus();
                } else {
                    $(this).removeClass('selected');
                }
            });

            // Handles response
            var handler = function(data) {
                $('.content').html($('.content', data).html()).show();
                $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
            };

            // Loads the page content and inserts it into the content area
            $.ajax({
                url: $.address.state() + event.path,
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    handler(XMLHttpRequest.responseText);
                },
                success: function(data, textStatus, XMLHttpRequest) {
                    handler(data);
                }
            });
        });

        // Hides the tabs during initialization
        document.write('<style type="text/css"> .content { display: none; } </style>');

    </script>   

我的几乎一模一样。我删除了链接突出显示，更改了 URL 以匹配我的站点并更改了 Ajax 调用，因为我正在加载 html。我想知道它是否还有“更多”（比如文档没有真正提及但我在项目的 GitHub 中找到的必要的 .htaccess）。

这是我的代码：

$.address.init(function(event) {
        $('#blogMenu a').address();
        $('#blogBottomMenu a').address();
        $('.linkleiste a').address();
}).change(function(event) {
        var value = $.address.state().replace(/^\/$/, '') + event.value;
  value = value.replace(/^\/blog\//,'');
  value = value.replace(/_/,'');
        var teile = value.split('/');
        var name = '';
        var thema = '';
        if(teile[0]) name = teile[0];
        if(teile[1]) thema = teile[1];
        $('#blog').hide();
            if(!value.match(/ADFRAME/)) {
                $(document).scrollTo('#aufmacher','fast');
                $('#blogMenu').load('/snp/blog_menu.snp',{A_NAME:name,ETIKETT:thema,id:id});
                $('#blog').load('/blog/article.snp',{A_NAME:name,ETIKETT:thema,id:id},function() {
                    $('#blog').show();
                });
            }
            else {
                $('#blog').fadeIn('fast');
            }

    });

Answer 1

如果您能设置一个演示供我们查看，将会更有帮助。但是通过查看您的代码，您需要确保在加载所有内容之前触发事件。

$(function () { // NOT $(document).ready(function () {});
    $.address.init();
});

此外，当没有散列时，您可能必须触发散列更改。

$(function () {
    $.address.init();
    $.address.change(); // Triggers hash change when there is no hash!
});

通过查看那里的代码，看起来他们使用的布局与您的不同。

var init = true,
state = window.history.pushState !== undefined;

// Handles response
var handler = function (data) {
    $('title').html($('title', data).html());
    $('.content').html($('.content', data).html());
    $('.page').show();
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
};

$.address.state('/jquery/address/samples/state').init(function () {

    // Initializes the plugin
    $('.nav a').address();

}).change(function (event) {

    // Selects the proper navigation link
    $('.nav a').each(function () {
        if ($(this).attr('href') == ($.address.state() + event.path)) {
            $(this).addClass('selected').focus();
        } else {
            $(this).removeClass('selected');
        }
    });

    if (state && init) {

        init = false;

    } else {

        // Loads the page content and inserts it into the content area
        $.ajax({
            url:$.address.state() + event.path,
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                handler(XMLHttpRequest.responseText);
            },
            success:function (data, textStatus, XMLHttpRequest) {
                handler(data);
            }
        });
    }

});

if (!state) {

    // Hides the page during initialization
    document.write('<style type="text/css"> .page { display: none; } </style>');
}

如果您设置演示，我会更新我的答案。