SmoothState.Js页面更改后重新初始化页面脚本 [英] Reinitializing page scripts after SmoothState.Js page change

问题描述

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

I am using SmoothState.js for page transitions and it works fine and loads the new pages with ajax. However, I have JS scripts on each page that need to be reinitialized and I have not been able to get them to always be present on page transitions.

基于常见问题解答:

smoothState.js提供了onAfter回调函数，该函数可让您 重新运行您的插件.如果您不熟悉，这可能会很棘手 AJAX的工作方式.

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.

在$(document).ready()上运行插件时，它将注册 仅针对页面上当前的元素.由于我们正在注射 每次加载新元素时，我们都需要再次运行插件，并对其进行范围界定 只是新的东西.

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.

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

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调用中.这样，每次用户更改页面时，功能将始终可用.

What my plan has been is to take the functions from my JS files and put them all into an onAfter call inside the SmoothState.js file. That way each time a user changes page, the functions would always be available.

这里是我现在的代码结构.我已经做了很多挖掘工作，但是我被困住了.您能帮我弄清楚我做错了什么吗?感谢您的宝贵时间！

Here the code structure I have now. I've done a lot of digging but I am stuck. Can you help me figure out what I am doing wrong? Thanks for your time!

$(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");
});

推荐答案

我通过将onAfter脚本移至主要的smoothstate函数(删除了其他smoothstate函数)，设法在代码的末尾运行了一个单独的函数.在刷新浏览器的情况下，也可以在准备好的文档上运行函数.如果它与您的代码相同，则如下所示:

I managed to get a separate function to run at the end of the code by moving your onAfter script into the main smoothstate function (remove the other smoothstate functions). Run your function on document ready as well in case of browser refresh. If it works the same with your code, it would be as follows:

$(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页面更改后重新初始化页面脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！