Question

我正在努力使用VS2013 SPA MVC-5模板中的导航。我做了两个假设（因为我找不到好的参考资料），但似乎我错了，或者它运作得不好：

它认为导航基于典型的spa # url encoding，例如导航到users account management page直接应该可以使用http://localhost:18759/#/manage
我还认为，当浏览网站（单页）时，我认为这些# url's由默认的knockout.js文件组成，这些文件包含在模板中。结合先前的假设，这将导致正确的历史积累。

http://localhost:18759/#/manage 似乎无法导航到manage页面（其他# url's也无法工作）。

我注意到有些框架可用来处理这个问题（navrouter和sammy.js）但据我所知，实现它们需要付出相当大的努力，特别是如果有的话已经存在于模板中。

至于我做出这些假设的原因，有一篇文章here，表明由于这一部分的原因而存在：

// app.viewmodel.js - there is a method called "addViewModel()
if (typeof (options.navigatorFactory) !== "undefined") {
        navigator = options.navigatorFactory(self, dataModel);
    } else {
        //suggests "#"-hash navigation
        navigator = function () {
            window.location.hash = options.bindingMemberName;
        };
    }

但是在我自己的app.viewmodel.js中，这些行根本没有引用哈希：

if (typeof (options.navigatorFactory) !== "undefined") {
        navigator = options.navigatorFactory(self, dataModel);
    } else {
        navigator = function () {
            self.errors.removeAll();
            self.view(viewItem);
        };
    }

这里有app.viewmodel.js中的哈希引用，但这似乎并不能处理导航：

// Private operations
function cleanUpLocation() {
    window.location.hash = "";

    if (typeof (history.pushState) !== "undefined") {
        history.pushState("", document.title, location.pathname);
    }
}

function getFragment() {
    if (window.location.hash.indexOf("#") === 0) {
        return parseQueryString(window.location.hash.substr(1));
    } else {
        return {};
    }
}

我的导航代码如下所示：

<ul class="nav navbar-nav navbar-right">
     <li data-bind="with: user"><a href="#" data-bind="click: manage">manage</a></li>
</ul>

并且导航工厂非常默认，如：

app.addViewModel({
    name: "Manage",
    bindingMemberName: "manage",
    factory: ManageViewModel,
    navigatorFactory: function (app) {
        return function (externalAccessToken, externalError) {
            app.errors.removeAll();
            app.view(app.Views.Manage);

            if (typeof (externalAccessToken) !== "undefined" || 
                typeof (externalError) !== "undefined") {
                   app.manage().addExternalLogin(externalAccessToken, externalError);
            } else {
                app.manage().load();
            };
        }
    }
});

问题（S）

这应该有用吗？如果是这样，我该如何解决？
或者我是否需要额外的组件，例如sammy.js或navrouter？

Answer 1

经过一天的挣扎，我得出了以下结论：

默认#中似乎没有VS2013 MVC 5 SPA template导航。

我设法让它工作，所以我将总结这里的实现方法。

虽然Paul Manzotti建议的pagerjs做得很好，但我选择使用sammy.js来执行导航。其他导航框架也应该可以正常工作。

所以第一步是从nuget获取它：

install-package sammy.js

安装sammy.js后，我们需要更改默认的VS2013 MVC 5 SPA template javascript个文件。我总结一下：

首先启用sammy.js。有多种选择可以放置代码，但是因为我想在整个应用程序中使用它，所以我把它放在：~/Scripts/app/_run.js这样：

//_run.js
$(function () {
    app.initialize();

    // Activate Knockout
    ko.validation.init({ grouping: { observable: false } });
    ko.applyBindings(app);

    //provides basic '#' navigation
    //run this function after the initialization of the
    //default knockout code.
    Sammy(function () {
        //"#:view" is the parameter's name of the data after the hash tag 
        //it is stored in "this.params.view"
        this.get('#:view', function () {
            //call the navigation functions
            //these are created in the default knockout initiallization
            app["_navigateTo" + this.params.view]();
        });
    }).run("#Home");//Specify the starting page of your application
 });

接下来，我希望#导航能够“开箱即用”。关键部分是导航时#参数被添加到url所以我需要挂钩navigateTo函数。 ~/Scripts/app/app.viewmodel.js中有一种方式：

变化：

//app.viewmodel.js
...
// Add navigation member to AppViewModel (for example, app.NavigateToHome());
self["navigateTo" + options.name] = navigator;

要：

//app.viewmodel.js
...
// Add navigation member to AppViewModel (for example, app.NavigateToHome());
// Override default routing to just set the hash
self["navigateTo" + options.name] = function() {
            window.location.hash = options.name;
    };

    //this one is used by sammy to perform actual default routing
    self["_navigateTo" + options.name] = function() {
        navigator();
    };

必须修复最终细节，即当用户刷新页面时，默认路径将转到#Home。这是由于~/Scripts/app/app.viewmodel.js中的以下代码：

//app.viewmodel.js
...
self.navigateToLoggedIn = function (userName, accessToken, persistent) {
    self.errors.removeAll();

    if (accessToken) {
        dataModel.setAccessToken(accessToken, persistent)
    }

    self.user(new UserInfoViewModel(self, userName, dataModel));

    //this line only routes to "#Home" when navigation
    //after the login... or register, or something else        
    if (window.location.hash === "#Login" || window.location.hash === "#Register")
        self.navigateToHome();
};

因此，请在此代码中添加正确的if语句，#已就位。

访问管理页面的正确网址是：

http://localhost:18759/#Manage

我必须说，我没有时间对其进行适当的审核（#网址编码可能会在其他地方使用并可能导致冲突）。如果我发现一些问题，我会更新这篇文章。

另一点：当然，有多种方法可以挂钩路由。我选择了这些步骤，因为它们适用于我正在处理的情况。

如何在历史中导航MVC 5 SPA模板？

1 个答案: