如何在 Durandal.js、mvc3 中使用部分视图

Question

我注意到 App/views 文件夹中的所有视图都是 html 类型，而不是 cshtml。剃须刀等我习惯的PartialViews和mvc3的东西怎么用？

Answer 1

Durandal 旨在创建一个完全位于一个页面内的应用程序。这样做的好处是用户体验就像桌面应用程序一样。此外，这允许应用程序轻松移植到phonegap，在那里它可以作为本机移动应用程序运行，甚至可以使用appjs 移植到桌面应用程序。

通过将整个应用程序保存为 html、js 和 css 文件，您可以 compress/minify/uglify 将整个应用程序合并到一个文件中，并让服务器为您提供整个应用程序。然后应用程序只需调用 Web 服务来获取其数据。这可能是一个 mvc 控制器、一个 web api 或一些返回数据的 web 服务。您可以使用此数据绑定到浏览器模板并生成要显示的视图。

您还可以拥有一个混合应用程序，您的服务器可以为多个 durandal SPA 提供服务，然后您将拥有由单个站点提供服务的一组应用程序。

我看到许多来自 MVC 背景的人都在问为什么我不能将 CSHTML 文件用于我的 HTML。简短的回答是你可以，但这样做会失去很多好处。当您让服务器呈现您的 html 文件时，您将无法再压缩/缩小/丑化整个应用程序，因为您依赖服务器为您生成 html。

如果您更喜欢 cshtml，那么传统上这是针对 AJAX 丰富的应用程序，您的用户调用一些 uri，服务器根据一些数据生成 HTML，将呈现的 html 发送回用户并粘贴到某处在屏幕中。通过这个过程，您拥有的是一个 AJAX 丰富的站点，而不是一个 SPA。您无法将此应用程序制作为本机移动应用程序甚至桌面应用程序。

Answer 2

如果您有兴趣将 Razor/CSHTML 与 Durandal 和 Knockout 结合使用，则有一个开源选项：FluentKnockoutHelpers。它提供了 ASP.NET MVC 的许多“好用的、有帮助的”部分，允许您使用 Durandal 和 Knockout 的强大功能而几乎没有失败。

快速解决 Evan Larsen 关于缩小（等）的要点：由于 FluentKnockoutHelpers 在运行时不运行任何逻辑，而只是生成标记，因此生成静态 HTML 文件非常简单使用流行的 RazorEngine 项目构建您的生产环境，该项目可让您运行 Razor 并从 C# 生成 HTML。这可以在 Durandal 所需的生产构建步骤之前运行（这为您提供了缩小等）

• Source

• Live demo using Durandal.js

简而言之，它提供了一系列功能，使进行 Durandal/Knockout 开发就像 ASP.NET MVC 一样简单。 （您只需为大多数功能提供您的 JavaScript 模型所基于的 C# 类型。）您只需为复杂的情况编写 JavaScript 和未编译的标记，这是不可避免的，与 MVC 没有什么不同！ （除了在 MVC 中，您的代码也很可能最终会成为一个大的 jQuery 混乱，这就是您首先使用 Durandal/Knockout 的原因！）

特点：

• 使用类似于 ASP.NET MVC 的强类型、流畅的 lambda 表达式助手轻松生成 Knockout 语法
• 丰富的智能感知和编译器支持语法生成
• 流畅的语法让创建自定义助手或扩展内置内容变得轻而易举
• OSS 替代 ASP.NET MVC 助手：随意添加社区中每个人都可以使用的可选功能
• 只需几行代码即可轻松地为所有当前/未来的应用程序类型和更改提供基于 .NET 类型和 DataAnnotations 的验证
• 客户端 JavaScript 对象工厂（基于 C# 类型）用于创建新项目，例如列表，零麻烦或服务器流量

没有 FluentKnockoutHelpers 的示例

<div class="control-group">
    <label for="FirstName" class="control-label">
        First Name
    </label>
    <div class="controls">
        <input type="text" data-bind="value: person.FirstName" id="FirstName" />
    </div>
</div>
<div class="control-group">
    <label for="LastName" class="control-label">
        Last Name
    </label>
    <div class="controls">
        <input type="text" data-bind="value: person.LastName" id="LastName" />
    </div>
</div>
<h2>
    Hello,
    <!-- ko text: person.FirstName --><!-- /ko -->
    <!-- ko text: person.LastName --><!-- /ko -->
</h2>

为 FluentKnockoutHelpers 提供 .NET 类型，您可以使用 Intellisense 和 Razor / CSHTML 中的编译器以风格完成此操作

@{
  var person = this.KnockoutHelperForType<Person>("person", true);
}

<div class="control-group">
    @person.LabelFor(x => x.FirstName).Class("control-label")
    <div class="controls">
        @person.BoundTextBoxFor(x => x.FirstName)
    </div>
</div>
<div class="control-group">
    @person.LabelFor(x => x.LastName).Class("control-label")
    <div class="controls">
        @person.BoundTextBoxFor(x => x.LastName)
    </div>
</div>
<h2>
    Hello,
    @person.BoundTextFor(x => x.FirstName)
    @person.BoundTextFor(x => x.LastName)
</h2>

查看 Source 或 Live Demo，详细了解 FluentKnockoutHelper 在不平凡的 Durandal.js 应用程序中的功能。

为了快速解决 Evan Larsen 关于缩小（等）的出色观点：由于 FluentKnockoutHelpers 在运行时不运行任何逻辑，而只是生成标记，因此使用流行的 @ 为您的生产构建生成静态 HTML 文件非常简单987654325@ 可让您运行 Razor 并从 C# 生成 HTML。这可以在 Durandal 所需的生产构建步骤之前运行（这为您提供了缩小等）

Answer 3

您的 SPA 将受到 MVC 呈现页面的限制。

<div id="applicationHost">
    @Html.Partial("_splash")
</div>

• MVC 页面可以提供菜单、侧边栏等。当然可以通过挂钩到客户端 SPA 中提供的 Pub/Sub 模型来监听 Durandal 事件。

• 利用 MVC 控制器并将不同的母版页、捆绑包交付给不同的 SPA。每个 CSHTML 页面可以调用不同的 main.js（main-viewport、main-uipanel.js 等）文件。

如果需要，有很多方法可以混合这两种技术。