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

Question

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

Answer 1

Durandal专为创建完全处于一个页面内的应用程序而设计。这样做的好处是用户体验就像桌面应用程序一样。此外，这允许应用程序很容易地移植到phonegap，在那里它可以作为本地移动应用程序生活，甚至可以使用appjs移植到桌面应用程序。

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

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

我看到很多来自MVC背景的人问我为什么不能为我的HTML使用CSHTML文件。简短的答案是你可以，但是你做这件事会失去很多好处。当你让服务器渲染你的html文件时，你不再可以压缩/缩小/丑化你的整个应用程序，因为你依靠服务器为你生成html。

如果您更喜欢cshtml，那么传统上这是针对一个AJAX丰富的应用程序，其中用户调用某个uri并且服务器根据某些数据生成HTML，将呈现的html发送回粘贴该用户的用户在屏幕某处。有了这个过程，你拥有的是一个AJAX丰富的网站，但不是SPA。您失去了将此应用程序设为原生移动应用程序甚至桌面应用程序的能力。

Answer 2

您的SPA将与您的MVC呈现页面的限制住在一起。

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

• MVC的页面可以提供菜单，工具条等，这将是绝对有可能挂接到客户端SPA提供的pub/sub模型来听迪朗达尔事件（一个或多个）。

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

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

Answer 3

如果您有兴趣使用剃刀/ CSHTML与迪朗达尔和淘汰赛有一个开源选项：FluentKnockoutHelpers。它提供了许多ASP.NET MVC的“好帮手”部分，让您可以使用Durandal和Knockout的卓越功能，几乎没有任何问题。

要快速解决埃文拉森的良好的出发点约缩小（等）：由于FluentKnockoutHelpers没有运行在运行时的任何逻辑，是刚刚产生的标记是死的简单使用生成静态HTML文件，为您的生产版本流行的RazorEngine项目，它允许您运行Razor并从C＃生成HTML。这可能Durandal的要求生产构建步骤之前正确运行（这会缩小型等）

• Source

• Live demo using Durandal.js

简而言之它提供了一系列的功能这使得Durandal/Knockout开发就像ASP.NET MVC一样简单。 （您只需提供一个C＃类型，您的JavaScript模型基于大部分功能。）您只需为复杂的情况编写JavaScript和未编译的标记，这是不可避免的，与MVC没有区别！ （除了在MVC你的代码也将有可能最终也将是一个很大的jQuery的混乱这就是为什么你在第一时间使用迪朗达尔/淘汰赛！）

特点：

• 无痛产生淘汰赛语法与强类型的，流畅的，lambda表达式助手类似于ASP.NET MVC
• 语法富二代智能感知和编译器的支持
• 流利的语法是一件轻而易举的创建自定义的助手或扩展什么建于
• ASP.NET MVC助手的OSS替代方案：随意添加社区中每个人都可以使用的可选功能
• 无痛提供基于.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类型，你可以使用智能感知和剃刀/ 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了一个详尽的在非平凡的Durandal.js应用程序中概述FluentKnockoutHelper的功能。

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