2

我正在构建一个普通的旧网站，其中一个页面中有一个单页应用程序。导航栏上还有其他页面，例如 Home、About、Blog，我的应用位于 Dashboard 中。

在查看了我的 SPA 选项后，我决定尝试 Durandal，因为它似乎对我的 ASP.NET 网页站点最友好。我正在使用 Hot Towelette，因为它看起来是一个非常不错的软件包，尽管我可能会切换到普通的 Durandal，因为我可能没有使用所有 Towelettes 功能。

设置 Nuget 包后，我将 index.cshtml 更新为我的 dashboard.cshtml 并将其适当地链接到导航栏上。从我的主页，我可以导航到仪表板，SPA 启动并运行良好。但是，当从仪表板单击主页按钮（或博客、关于等）时，页面只会让我返回 SPA 的初始视图。

这是我从 index.cshtml 更改后的dashboard.cshtml。我没有对来自 Nuget 的热毛巾纸做任何其他更改。

@using System.Web
@using System.Web.Optimization
@{
    Layout = "Layout/_Layout.cshtml"; //<--- My nav bar with my other links are in here
}
<div id="applicationHost">
    @RenderPage("_splash.cshtml")
</div>

@Scripts.Render("~/scripts/vendor")
@if (HttpContext.Current.IsDebuggingEnabled)
{
    <script type="text/javascript" src="App/durandal/amd/require.js" data-main="/App/main"></script>
}

else
{
    <!-- Remember to run the Durandal optimizer.exe to create the main-built.js  -->
    <script type="text/javascript" src="App/main-built.js"></script>
}

问：如何在常规网站中设置 Durandal SPA 页面，而不让它接管我所有页面的路由？

编辑 这里是导航部分：

//Original
<nav>
    <a href="/">Home</a> 
    <a href="aboutus">About Us</a>  
    <a href="blog">Blog</a>
</nav>

将它们更改为以下内容似乎没有什么不同。此外，即使我使用的是 FriendlyUrls，它也会强制将 .cshtml 扩展名添加到 URL 中。

//Ineffective Changes
<nav>
    <a href="default.cshtml">Home</a> 
    <a href="aboutus.cshtml">About Us</a>  
    <a href="blog.cshtml">Blog</a>
</nav>
4

5 回答 5

0

我知道的唯一解决方案是将链接中的 url 设为绝对值，例如：

<a href="http://www.MyGreatPage.html"></a>

但我知道这并不总是可能的。
我会尝试用一些更好的解决方案回来。

于 2013-09-30T07:56:37.580 回答
0

由于没有其他答案被接受，我想投入我的 0.02 美元 -

确保您正在动态设置的路线包含相对路径 -

 <a href="">Index</a>

并且您的 Durandal 路线是基于散列的 - 请注意这里的区别是包括 / 之前的散列

 <a href="/#index">Index</a>
 <a href="#index">Index</a>

这两种方法都有效并且被 Durandal 的路由器正确拦截。

对于您的非 Durandal 路线，请使用相对路径 -

 <a href="/../index">Index</a>   
 <a href="/index">Index</a>   
 <a href="/controllerName/index">Index</a>

所有这些都应该起作用，具体取决于您定位视图的方式（控制器等......）

其他可能性

在先前版本的 Durandal 中，如果您有多个以相同文本结尾的路线，它将找到第一个。如果最重要的是，您有一条以相同文本结尾的非 Durandal 路线，它可能会做同样的事情。解决方法是使用guardRoute 确保只拦截正确的路由。

您可以尝试两件事来查看是否发生这种情况 -

router.mapUnknownRoutes(function(instruction){
    console.log(instruction);
    if (instruction.fragment === 'index.cshtml') {
         window.location('/' + instruction.fragment);
    }
});

在激活您的第一个路由之前，在您的 main.js 或您拥有的任何入口点中注册该处理程序，它应该会捕获任何未知路由。此时检查指令的某些部分（查看控制台以更好地细分它所包含的内容）是否与.cshtml 之类的内容匹配，如果是，则构建正确的 URI 字符串和 window.location 它。

这也将允许您覆盖错误的路由，以潜在地将它们指向自定义错误页面。

于 2013-10-16T17:17:52.940 回答
0

也许重新考虑你的架构是最好的：

选项 1：为您打算创建的每个 SPA 制作整个热毛巾项目。
选项 2：相反，您可以考虑将整个站点设置为 SPA。
选项 3：只使用 Durandal 而不是你提到的热毛巾。（如果您不想为每个 SPA 创建整个项目）

选项 4： 查看“HotTowelRouteConfig.cs”。在该文件中，引用了默认控制器和操作。您可以在默认路由前加上“spa”，结果将是：

Durandal: domain/spa/#/
（不打断你的其他路线）

选项 5： 查看控制器（在“HotTowelRouteConfig.cs”中命名），您可以向该控制器添加一些特定操作。

选项 6： 使用前缀文件夹或其他东西创建一个全新的路由配置。（选项 4 的倒数）

Durandal: domain/#/
自定义路由: domain/pages/aboutus.cshtml

希望这可以帮助。

于 2013-10-16T16:36:16.163 回答
0

由于没有其他选项适合我，最终我的解决方案是切换到 Sammy.js。我能够以几乎零的努力将 Sammy.js 放入我现有的应用程序中，并且它与我网站的其他部分没有冲突。作为一个额外的好处，Sammy 的路由不会触发全屏导航，这意味着全屏应用程序在使用 Sammy.js 导航时将保持全屏状态。

于 2013-10-16T18:16:13.100 回答
0

您没有提供与导航栏中的链接相关的任何 html。听起来这就是问题所在。以下形式的任何链接都会触发 durandal 路由器：

<a href="#/dashboard">Dashboard</a>

以下形式的任何链接都会触发原生浏览器路由：

<a href="index.html">Index</a>

您能否验证 ASP.NET 是如何编译您的网页源代码的？

编辑

另一种选择是使用带有 javascript 导航 api 的点击绑定：

<a href="#" data-bind="click: function() { location.assign('index.cshtml') }">Index</a>
于 2013-09-30T14:19:34.067 回答