一些 java 脚本似乎被 durandal 覆盖答案

【问题标题】：some java script seems to be overwritten by durandal一些 java 脚本似乎被 durandal 覆盖
【发布时间】：2014-07-11 02:39:38
【问题描述】：

我正在尝试使用热毛巾模板实现单页应用程序。在我尝试合并 CSS HTML 模板之前，一切都很好。我正在使用 Durandal + RequireJS。

导航栏的 HTML 位于 nav.cshtml 中（我在 Durandal 中使用 cshtml）

如果之前粘贴在 index.html 中，则相同的 HTML

<div id="applicationHost">

效果很好。

如果使用 Durandal 导航视图将 Same 包含在 applicationHost 中，则无法正常工作。

我的 nav.cshtml 有一个根，没有空格或 cmets。

在导航栏上，与悬停相关的 javascript 似乎无法正常工作。

滑块也不会触发所需的javascript来启动它。

知道如何解决这个问题吗？

如果您复制 nav.cshtml 中的所有内容并将其粘贴到 applicationHost 上方，我已将我的代码上传到 http://we.tl/3NgPgGhoUI，则中殿悬停工作正常。但如果你用 durandal 注射它。它不会工作。 home.cshtml 中的 html 代码也是如此。那个html实际上只是一个滑块。使用 durandal 注射时它没有显示任何东西。但是，如果您复制 index.cshtml 中的 html，同样可以正常工作，如果您可以查看一下，那真的很棒。

我将所有cshtml都转换成html（除了index），我的shell.html如下所述。

<div>
<div>
    <!-- ko compose: {view: 'nav'} -->
    <!-- /ko-->
</div>
<div id="content">
    <!--ko compose: {
        model: router.activeItem,
        compositionComplete: router.compositionComplete,
        attached: router.attached,
        cacheViews:true,
        } -->
    <!--/ko-->
</div>
<!-- ko compose: {view: 'footer'} -->
<!-- /ko-->

index.cshtml 是

<body>
<div id="applicationHost">        
</div>
<script src="/TemplateFiles/js/jquery.js"></script>
@Scripts.Render("~/scripts/vendor") 
<script src="~/Scripts/require.js" data-main="@Url.Content("~/App/main.js")"></script>
</body>
</html>

【问题讨论】：

标签： single-page-application durandal

【解决方案1】：

我可以肯定地说为什么这不起作用。加载索引页面时，它通过标准 ASP.NET 管道以 Razor 作为呈现引擎进行加载。 Razor 允许将 @Html.Partial("_splash") 之类的内容翻译成 HTML（因为这在 HTML 中没有意义）。

另一方面，nav.cshtml 正在由 Durandal 通过 AJAX 加载。它不经过 Razor 渲染过程，因此您不能使用 @Html.Partial("_splash") 之类的东西。所有这些代码都必须进入index.cshtml。 Durandal 检索到的所有内容都必须是纯 HTML。您需要将 nav.cshtml 转换为 nav.html 并在其中使用常规 HTML 语法。

附：可以使用 Razor (cshtml) 来响应 Durdandal AJAX 请求，但这可能是一个复杂的过程，我不建议这样做。

【讨论】：

根据您的建议，我将 cshtml 更改为 html 用于 shell 和 nav。 index.cshtml 包含 applicationHost 没有 html.partial 用于启动。在它下面是模板所需的所有 javascript 文件，最后我有 main.js 但仍然无法正常工作
我的 index.cshtml 如下所示。导致下拉的 Javascript 文件是 bootstrap-hover-dropdown.min 并且正在使用 scriptRender 为供应商添加。我也尝试在没有脚本渲染的情况下引用它。 <body> <div id="applicationHost"> </div> <script src="/TemplateFiles/js/jquery.js"></script> @Scripts.Render("~/scripts/vendor") <script src="~/Scripts/require.js" data-main="@Url.Content("~/App/main.js")"></script>
尝试在浏览器中打开开发者工具，查看返回的文件以及是否因任何原因出错。如果 SPA JavaScript 在启动期间出错，通常一切都会停止。
控制台没有错误。所有 spa 框架的东西都在运行。我可以看到烤面包机消息 lke SPA 加载和第一页加载!!。
你能在上面的问题中显示你的 shell.html 吗？

【解决方案2】：

我可以肯定地说，您应该对主要内容使用“路由器”绑定，而不是当前使用的“撰写”绑定。它会更干净。您可以找到该 here 的文档。

唯一能想到的另一件事是确保为您的视图正确设置约定。换句话说，您需要在启动期间在 ViewLocator 模块上调用viewLocator.useConvention()，它会期望看到您的文件结构如下所示：

/App
| - main.js // startup code
| - /views
|   | - nav.html
|   | - shell.html
|   | - home.html
| - /viewmodels
|   | - shell.js
|   | - home.js

如果你已经完成了所有这些事情，那么如果不查看我可能会做的所有代码，我不知道还能说什么，但这需要我一段时间。

【讨论】：

我正在使用约定和结构类似但徒劳无功:(最新更改的代码在we.tl/TyHLOWp0Px如果你有机会可以看看的话，我会非常满意。只是再次清除它实际上有很多 javascript 文件，但我只保留一个文件，例如 bootstrap-hover-dropdown.min.js 这个 js 会导致导航上的悬停下拉效果。
在问题stackoverflow.com/questions/24690027/… 中重现问题更加简单。