Question

我使用SmoothState.js进行页面转换，它工作正常并使用ajax加载新页面。但是，我在每个页面上都有需要重新初始化的JS脚本，而且我无法让它们始终出现在页面转换中。

根据常见问题解答：

smoothState.js提供了允许你的onAfter回调函数   重新运行你的插件。如果你不熟悉，这可能会很棘手   AJAX如何运作。

当你在$（document）.ready（）上运行一个插件时，它会注册   仅适用于当前页面上的元素。因为我们正在注射   每个负载的新元素，我们需要再次运行插件，确定它的范围   只是新的东西。

执行此操作的一种好方法是将插件初始化包装在一个   我们在$ .fn.ready（）和onAfter上调用的函数。你会想要的   每次初始化插件时指定上下文以便您   不要双重绑定它们。这称为“模块执行   控制器”。

我的计划是从我的JS文件中获取函数并将它们全部放入SmoothState.js文件中的onAfter调用中。这样，每次用户更改页面时，功能始终可用。

这是我现在的代码结构。我做了很多挖掘但是我被卡住了。你能帮我搞清楚我做错了什么吗？谢谢你的时间！

$(document).ready(function() {
    mail();

});

$('#main').smoothState({
    onAfter: function() {
        mail();
    }
});

function mail() {
    // script from mail.js goes here
}

$(function() {
    $('#main').smoothState();
});

$(function() {
    "use strict";
    var options = {
            prefetch: true,
            pageCacheSize: 3,
            onStart: {
                duration: 250, // Duration of our animation 
                render: function($container) {
                    // Add your CSS animation reversing class 

                    $container.addClass("is-exiting");


                    // Restart your animation 
                    smoothState.restartCSSAnimations();
                }
            },
            onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class 
                    $container.removeClass("is-exiting");

                    // Inject the new content 
                    $container.html($newContent);


                }

            },

        },
        smoothState = $("#main").smoothState(options).data("smoothState");
});

Answer 1

我设法通过将onAfter脚本移动到主smoothstate函数（删除其他smoothstate函数）来获得在代码末尾运行的单独函数。在浏览器刷新的情况下，也可以在文档就绪时运行您的功能。如果它与您的代码相同，则如下：

$(document).ready(function() {
        mail();

    });

    function mail() {
        // script from mail.js goes here
    }

    $(function() {
        "use strict";
        var options = {
                prefetch: true,
                pageCacheSize: 3,
                onStart: {
                    duration: 250, // Duration of our animation 
                    render: function($container) {
                        // Add your CSS animation reversing class 

                        $container.addClass("is-exiting");


                        // Restart your animation 
                        smoothState.restartCSSAnimations();
                    }
                },
                onReady: {
                    duration: 0,
                    render: function($container, $newContent) {
                        // Remove your CSS animation reversing class 
                        $container.removeClass("is-exiting");

                        // Inject the new content 
                        $container.html($newContent);


                    }

                },
                onAfter: function() {
                    mail();
                }
            },
            smoothState = $("#main").smoothState(options).data("smoothState");
    });

Answer 2

我现在在网站上工作，这类似于我的想法。

我的方式是，我有两个主要功能。第一个包含所有需要只运行一次的函数 - 即处理Ajax和POPSTATE变化等的函数。此函数在结束时运行第二个主函数。第二个主要功能是一个函数，它包含需要在页面更改时重新运行的函数，它在运行函数之前查找特定的类或ID标记在网站的内容区域中，并将事件侦听器附加到新加载的元素上页。

function mainOne() {
    // Set up Ajax, set up any navigation menus that stay constant through pages etc

    // Also runs the 2nd function so that the functions specific to the page
    //   the code loads up on also get run
    mainTwo();
}
function mainTwo() {
    // Contains functions that are specific to pages that can be loaded via AJAX
    /* ie:
    if( $("element-that-only-exists-once-on-one-specific-page").length == 1 ) {
        // Do stuff specific to only this page
    } */
}

在我的AJAX函数中，我会在每次成功加载页面时调用mainTwo（）。

确保每个元素只运行一次函数的一种新方法是向要附加事件的元素添加一个类，例如：

$("div.objects").not(".processed").addClass("processed").click(function(){
    // Stuff to do in the function
});

从你在那里引用的，听起来像我的mainTwo（）函数几乎是他们想要你设置的。基本上是保存所有其他功能的主要功能。如果您发布更多代码，我可以帮助您解决问题。

在SmoothState.Js页面更改后重新初始化页面脚本

2 个答案: