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

【问题标题】：jQuery BBQ split URL state into useable chunksjQuery BBQ 将 URL 状态拆分为可用的块
【发布时间】：2012-06-26 22:09:57
【问题描述】：

真的很难理解 jQuery BBQ 并且做得不好。有几件事情我需要弄清楚，但我会试着把重点放在我认为最重要的事情上，希望剔除这一部分会引导我解决其他问题。

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

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

这是货物：

当hashchange 事件发生时，我的超级骗子 hash-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;
});

【问题讨论】：

标签： jquery url state hashchange jquery-bbq

【解决方案1】：

您可以有一个单独的 show_video 函数来显示要显示的 id，而不是将“show_video”事件作为每个链接的 onClicks。然后，您可以使用 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

【讨论】：