Question

我有一个使用require.js和backbone.js构建的前端javascript应用程序。应用程序的大多数部分使用标准/推荐的构建应用程序的方式，包括使用Backbone Router对象进行路由。

现在我想在应用程序的一个部分中添加一些更多的可视化更改。而不是单击链接和路由器渲染另一个视图，我想要在发生之前进行一些视觉上的更改。就像点击链接时发生的GUI效果一样，当该效果完成时，新视图应该像以前一样呈现。

我想一种可能的方法是将click事件挂钩到给定的链接，取消正常传播（取消在骨干对象中捕获的路由），执行可视化内容，然后手动调用路由器或渲染直接查看。然后我需要从视图中访问路由器对象（调用通常捕获点击的动作方法），或者我需要从添加到链接的click事件中渲染视图，导致渲染代码被复制（在事件功能和视图中）。

有没有一种好的和整洁的方式来做这样的事情，而不会制作难看的意大利面条代码？

Answer 1

您可以使用以下代码捕获每个链接上的所有点击，然后执行您想要的操作：

$(document).on('click', 'a:not([data-bypass])', function (evt) {

    var href = $(this).attr('href');
    var protocol = this.protocol + '//';

    if (href.slice(protocol.length) !== protocol) {
        evt.preventDefault();
        var rootLength = Backbone.history.root.length - ((Backbone.history.root.substring(Backbone.history.root.length - 1) === '/') ? 1 : 0);

        // Here before calling the history.navigate that trigger your router 
        // routes, do your visual effects

        Backbone.history.navigate(href.slice(rootLength), {
            trigger: true
        });
    }
});

将路由作为事件运行

1 个答案: