带有 Razor 和 C# ViewModel 的 Durandal 视图 - 更新 2015

• 下载 durandalexample.zip - 935.2 KB

引言

在较早的文章 https://codeproject.org.cn/script/Articles/MemberArticles.aspx?amid=9559190 中，我展示了如何使用 razor cshtml 视图与 durandal 配合使用。 一年后，我们现在有了一种“更好”的方法来实现这一点。
虽然旧方法仍然有效，并且在某些情况下很有用，但也可以直接将控制器操作映射到 durandal 视图，而不是在较早的文章中描述的“通用”操作。

使用代码

Durandal 的 ViewLocator 可以使用一些参数调用，以告诉 durandal 在哪里查找视图文件。 我们可以使用它来解决我们的问题。

第一步，更改 Durandal 的视图行为
首先，我们将查看 main.js 并查找以下内容

define(['durandal/app', 
'durandal/viewLocator',
'durandal/system', 
'plugins/router', 
'services/logger'], boot);

function boot(app, viewLocator,viewEngine, system, router, logger) {
app.start().then(function () {
   viewLocator.useConvention();
});
[...]

这告诉 durandal 对视图使用“默认约定”，例如 /app/views/*.html

为了告诉 durandal 使用其他内容，我们现在更改此行为

// Add "durandal/viewEngine" to the function definition:
define(['durandal/app',
        'durandal/viewLocator',
        'durandal/viewEngine',
        'durandal/system',
        'plugins/router',
        'services/logger'], boot);

// change viewLocator initalisation:
app.start().then(function () {
        viewLocator.useConvention('viewmodels', '../../durandal');
        viewEngine.viewExtension = '/';
});

 

viewLocation.useConvention 的第一个参数告诉 durandal 将 /Apps/viewmodels/ 目录设置为视图模型 js 文件的位置。
然而，第二个参数告诉 durandal 使用 URL http://<mydomain>/durandal/ 作为视图。
此外，viewExtension 参数告诉 durandal 视图没有扩展名（就像我们的 mvc 控制器一样……）
现在，当 Durandal 正在查找名为 'shell' 的视图时，它将引用 http://<mydomain>/durandal/shell/

根据 MVC 约定，此 URL 将被映射，系统将查找名为“Durandal”和“Shell”作为操作名称的控制器

添加一个新的控制器

下一步，我们必须添加一个新的控制器来处理视图的操作和路由

// will render dynamic views for Durandal
public class DurandalController : Controller
{
    public ActionResult Shell()
    {
        return View();
    }

    public ActionResult Home()
    {
        return View();
    }

    public ActionResult Nav()
    {
        return View();
    }

    public ActionResult Details()
    {
        return View();
    }

    public ActionResult Sessions()
    {
        return View();
    }

    public ActionResult Footer()
    {
        return View();
    }
}

现在我们需要设置视图

这很简单，只需在“Views”下方添加一个名为“Durandal”的文件夹，并将 /App/Views/ 中的所有 *.html 文件复制到新创建的文件夹中。 将文件重命名为 .cshtml ，就完成了。

完成此步骤后，我们就可以启动应用程序了。
结果是我们 hot towel 项目的正常外观，但后台有一个完全可用的 mvc 控制器。

 

 

关注点

这两种方法，一种是本文讨论的，另一种是较早的文章中讨论的，都有其优点和缺点。 对于 cms 行为，您可能需要一个更通用的操作，但本文讨论的方法也有其用途。