javascript - 使用 sammy.js 重新加载页面

Question

我在 asp.net mvc 中将 sammy.js 用于单页应用程序。
一切都很好，但我遇到了一个问题，就是无法重新加载页面。
例如，当我在仪表板中时，我的 URL 是

http://localhost:1834/#/Home/Index?lblbreadcum=Dashboard

layout.cshtml

 <script>
    $(function () {

        var routing = new Routing('@Url.Content("~/")', '#page', 'welcome');

        routing.init();

    });
</script>

routing.js

var Routing = function (appRoot, contentSelector, defaultRoute) {

function getUrlFromHash(hash) {

    var url = hash.replace('#/', '');
    if (url === appRoot)
        url = defaultRoute;

    return url;
}

return {

    init: function () {
        Sammy(contentSelector, function () {


            this.get(/\#\/(.*)/, function (context) {
                var url = getUrlFromHash(context.path);

                context.load(url).swap();

            });

        }).run('#/');
    }
};
}

我想通过单击仪表板菜单/链接来重新加载页面。但是点击事件没有触发，因为链接没有改变。但是，如果我想转到另一页，那就没问题了。请帮帮我。谢谢。

Answer 1

我认为您必须再次附加相同的部分。你不能在那个意义上“更新”部分。正如您在帖子中所说，当您单击另一个链接然后再次返回时，它会起作用。

这就是你必须要做的。再次附加相同的页面/部分，通过这样做你清除所有变量并重新创建它们，通过模拟刷新。

编辑:添加示例请注意，我没有直接复制您的代码，但我想您会理解的:)在我的示例中我不使用井号 (#)。

var app = Sammy(function () {

        this.get('/', function (context) {
             // context is equalient to data.app in the custom bind example
             // currentComponent('home'); I use components in my code but you should be able to swith to your implementation
            var url = getUrlFromHash(context.path);
            context.load(url).swap();
        });

        this.bind('mycustom-trigger', function (e, data) {
            this.redirect('/'); // force redirect
        });

        this.get('/about', function (evt) {
            // currentComponent('about'); I use components in my code but you should be able to swith to your implementation
            var url = getUrlFromHash(context.path);
            context.load(url).swap();
        });

    }).run();

    // I did an easy example trigger here but I think you will need a trigger on your link-element. Mayby with a conditional check wheter or not to trigger the manually binding or not
    $('.navbar-collapse').click(function () {
        app.trigger('mycustom-trigger', app);
    });

请阅读更多关于 events 的信息和 routing在 sammy.js 中

祝你好运:)