jQuery BBQ 将 URL 状态拆分为可用的块

Question

非常

努力地理解jQuery BBQ，但做得不好。有几件事我需要弄清楚，但我会尽量把重点放在我认为最重要的事情上，希望把这部分敲掉能指导我解决其他问题。

我有一个页面，其中包含三个部分，每个部分都是隐藏的。当用户单击导航链接时，相应的部分将展开，其他部分（如果处于活动状态）将被隐藏。URL 将更新为表示页面的哈希。所以localhost变得localhost/#work.在我的代码中，这工作正常。

在#work部分中，有多个缩略图对应于不同的视频，我正在尝试在URL中添加值以允许书签和其他爱，因此使用jQuery BBQ。这种工作，有一个小问题，网址变得丑陋。 localhost变得localhost/#work=&misery=.丑陋，但它已正确更新（并且该部分按预期保持打开状态）。

这是货物：

当发生hashchange事件时，我的超级骗子哈希bash函数会运行并检查URL中的哈希值，然后打开相应的部分。如何使用jQuery BBQ的.getState()方法，从URL中提取视频值，然后单击该缩略图？

非常感谢，我知道这是冗长的，但我想尽可能清晰和描述性。请在下面找到一个 jsFiddle（尽管我根本无法让哈希出现在那个环境中......呃！以及原始代码。

http://jsfiddle.net/danielredwood/n2KWv/2/

JavaScript：

function navi(){
var hash = window.location.hash,
    hspl = hash.split('=')[0],
    acti = $('.out')
    test = $.bbq.getState();
    console.log(test);
    if (!$('body').hasClass('work')){
        acti.removeClass('out').slideUp(400);
        $(hash).addClass('out').slideDown(400);        
    } else {
        if (hspl != '#work') {
            $('body').removeClass('work');
            acti.removeClass('out').slideUp(400);
            $(hash).addClass('out').slideDown(400);
        }
    }
}
/* Nav */
$(window).bind('hashchange', function(){
    navi();
});
/* Thumbnail Clicks */
$('.thumbnail a').click(function(){
    $('body').addClass('work');
    var name = $(this).attr('id');
    $.bbq.pushState(name);                
    return false;
});

​

Answer 1

与其将"show_video"事件作为每个链接的onClicks，不如使用单独的show_video函数来显示id。然后，您可以使用 jsbbq 添加多个哈希状态属性，然后测试它们是否存在并采取相应的措施。

因此，您可以执行以下操作：

function show_video(vid_id) {
    ...
}
$('.thumbnail a').click(function(){
    ...
    var name = $(this).attr('id');
    $.bbq.pushState({'view':'work', 'video':name});                
    ...
    return false;
});
$(window).bind('hashchange', function(){
    var state = $.bbq.getState();
    if (state['view'] === 'work'){
        var vid_id = state['video'];
        show_video(vid_id);
    } else {
       ...
    }
}

您可能还想阅读 $.bbq.push_state（..） 函数的 *merge_mode* 属性。它允许您仅覆盖特定的哈希状态值或重写整个哈希状态。

http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState