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

Question

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

Based on the FAQ:

smoothState.js provides the onAfter callback function that allows you to re-run your plugins. This can be tricky if you're unfamiliar with how AJAX works.

When you run a plugin on $(document).ready(), it's going to register only on elements that are currently on the page. Since we're injecting new elements every load, we need to run the plugins again, scoping it to just the new stuff.

A good way to do this is to wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter. You'll want to specify the context each time you initialize the plugins so that you don't double-bind them. This is called a "module execution controller".

我的计划是从我的 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

我现在正在做一个网站，我想这和你做的很相似。

我这样做的方式是，我有两个主要功能。第一个包含所有只需要运行一次的函数——即处理 Ajax 和 POPSTATE 变化等的东西。这个函数运行是末尾的第二个主要函数.第二个主要功能是包含需要在页面更改时重新运行的功能，它会在[=27=之前的网站内容区域中查找特定的class或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()。

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

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

根据您在那里引用的内容，听起来我的 mainTwo() 函数几乎就是他们希望您设置的。基本上是一个包含所有其他功能的主要功能。如果您 post 更多代码，我可以帮助您整理。

Answer 2

我通过将 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");
    });

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

Reinitializing page scripts after SmoothState.Js page change

javascript

ajax

jquery

smoothstate.js