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);
    });

请详细了解sammy.js中的events和routing

祝你好运：）

Answer 2

强制重新加载路线的一种更简便的方法是调用Sammy.Application refresh() method：

import { sammyApp } from '../mySammyApp';

const url = `${mySearchRoute}/${encodeURIComponent(this.state.searchText)}`;
if (window.location.hash === url) {
    sammyApp.refresh();
else {
    window.location.hash = url;
}

使用sammy.js重新加载页面

2 个答案: