如何使用Durandal.js，mvc3的部分视图

Question

我注意到App / views文件夹中的所有视图都是html类型，而不是cshtml。我如何使用我习惯的部分视图和mvc3等剃须刀？

Answer 1

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

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

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

我看到许多人来自MVC背景，问我为什么不能将CSHTML文件用于我的HTML。简短的回答是你可以，但你这样做会失去很多好处。当您让服务器呈现您的html文件时，您不再可以压缩/缩小/ uglify您的整个应用程序，因为您依靠服务器为您生成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一样简单。 （您只需提供一个C＃类型，您的JavaScript模型基于大多数功能。）您只需要为复杂的情况编写JavaScript和未编译的标记，这是不可避免的，与MVC没有区别！ （除了在MVC中你的代码也可能最终也会是一个很大的jQuery混乱，这就是为什么你首先使用Durandal / Knockout！）

功能

• 使用类似于ASP.NET MVC的强类型，流畅，lambda表达式助手，无痛地生成Knockout语法
• 丰富的intellisense和编译器支持语法生成
• Fluent语法可以轻松创建自定义帮助程序或扩展内置的
• 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>

使用.NET类型提供FluentKnockoutHelpers，您可以使用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文件非常简单{3}}允许您运行Razor并从C＃生成HTML。这可以在Durandal所需的生产构建步骤（它为您提供缩小等）之前运行。

Answer 3

您的SPA将与您的MVC呈现页面的范围一起生活。

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

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

  < / LI>

• 利用MVC控制器并向不同的SPA提供不同的母版页，捆绑包。每个CSHTML页面都可以调用不同的main.js（main-viewport，main-uipanel.js等）文件。

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