Sammy.js 路由无限循环答案

【问题标题】：Sammy.js routing endless loopSammy.js 路由无限循环
【发布时间】：2014-07-28 14:29:15
【问题描述】：

我正在尝试实施 https://github.com/jonfazzaro/mvc-spa/tree/master/mvc-spa 在我的 ASP.NET MVC 应用程序中。

我将仅突出显示 _Layout.cshtml 中的代码

 <div id="body">
        @RenderSection("featured", required: false)
        <section id="page" class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @*@Scripts.Render("~/bundles/jqueryui")*@
    @Scripts.Render("~/js/mvc-spa")
    <script>
        $(function () {
            var routing = new Routing('@Url.Content("~/")', '#page', '');
            routing.init();
        });
    </script>

这里又是来自 git hub 的路由配置

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

function getUrlFromHash(hash) {
    var url = hash.replace('#/', '');
    if (url === appRoot)
        url = defaultRoute;
    return url;
}

return {
    init: function () {
        var app = Sammy(contentSelector, function () {
            this.get(/\#\/(.*)/, function (context) {
                var url = getUrlFromHash(context.path);
                context.load(url).swap();
            });
        })

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

}

如果我转到 /#/about 或 /#/contact（如 git hub 中的示例应用程序），一切看起来都很好，但是当导航到我的应用程序页面的 #/（根路径）时，我的应用程序页面被一遍又一遍地调用

发生了什么事？

我问自己的另一个问题是如何处理 404 错误当去/#/nosuchurl

【问题讨论】：

标签： asp.net-mvc model-view-controller asp.net-mvc-5 single-page-application sammy.js

【解决方案1】：

有点晚了，但我希望这对某人有帮助。

我想问题是您将整个索引作为视图加载，其中包含布局中的所有内容（脚本、css 等）。

我也在使用 Sammy.js 和 MVC 网络应用程序进行测试，这很有效：

_布局：

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#/Home/_Index">Home</a></li>
                <li><a href="#/Home/About">About</a></li>
                <li><a href="#/Home/Contact">Contacto</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content" id="page">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script>
    $(function () {
        var routing = new Routing('@Url.Content("~/")', '#page', '');
        routing.init();
    });
</script>

家庭控制器：

public class HomeController : Controller {
    public ActionResult Index() {
        return View();
    }

    public ActionResult _Index() {
        return PartialView();
    }

    public ActionResult About() {
        ViewBag.Message = "Your application description page.";

        return PartialView();
    }

    public ActionResult Contact() {
        ViewBag.Message = "Your contact page.";

        return PartialView();
    }
}

以及 GitHub 中示例自带的 Routing 文件：

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('#/');
    }
};}

【讨论】：