Hot Towel 模板

项目
07/13/2023

热毛巾 MVC 模板由 John Papa 编写

选择要下载的版本：

适用于 Visual Studio 2012 的热毛巾 MVC 模板

适用于Visual Studio 2013的热毛巾 MVC 模板

热毛巾：因为你不想去温泉没有一个！

想要构建 SPA，但无法决定从何处开始？使用热毛巾，几秒钟内，你将有一个 SPA和所有你需要的工具，以构建它！

热毛巾为使用 ASP.NET 生成单页应用程序 (SPA) 创造了一个很好的起点。它现成地为代码、视图导航、数据绑定、丰富的数据管理和简单而优雅的样式提供了模块化结构。热毛巾提供构建 SPA 所需的一切，因此你可以专注于你的应用，而不是管道。

通过 John Papa 的视频、教程和 Pluralsight 课程详细了解如何构建 SPA。

应用程序结构

热毛巾 SPA 提供一个 App 文件夹，其中包含定义应用程序的 JavaScript 和 HTML 文件。

在“应用”文件夹内：

durandal
services
viewmodels
视图

App 文件夹包含模块的集合。这些模块封装功能并声明对其他模块的依赖关系。 views 文件夹包含应用程序的 HTML，viewmodels 文件夹包含视图的呈现逻辑 (常见的 MVVM 模式) 。 services 文件夹非常适合用于存放应用程序可能需要的任何常见服务，例如 HTTP 数据检索或本地存储交互。多个 viewmodel 重复使用服务模块中的代码很常见。

ASP.NET MVC 服务器端应用程序结构

热毛巾基于熟悉且功能强大的 ASP.NET MVC 结构。

App_Start
Content
控制器
模型
脚本
视图

特色库

ASP.NET MVC
ASP.NET Web API
ASP.NET Web 优化 - 捆绑和缩小
Breeze.js - 丰富的数据管理
Durandal.js - 导航和视图组合
Knockout.js - 数据绑定
Require.js - 采用 AMD 和优化的模块化
Toastr.js - 弹出消息
Twitter Bootstrap - 可靠的 CSS 样式

通过 Visual Studio 2012 热毛巾 SPA 模板进行安装

热毛巾可以安装为 Visual Studio 2012 模板。只需单击 File | New Project 并选择 ASP.NET MVC 4 Web Application。然后选择“热毛巾单页应用程序”模板并运行！

通过 NuGet 包安装

热毛巾也是一个 NuGet 包，用于扩充现有的空 ASP.NET MVC 项目。只需使用 Nuget 进行安装，然后运行！

Install-Package HotTowel

如何在热毛巾上构建？

只需开始添加代码！

添加自己的服务器端代码，最好是实体框架和 WebAPI (这与Breeze.js)
向文件夹添加视图App/views
将 viewmodels 添加到 App/viewmodels 文件夹
将 HTML 和 Knockout 数据绑定添加到新视图
更新中的导航路由 shell.js

HTML/JavaScript 演练

Views/HotTowel/index.cshtml

index.cshtml 是 MVC 应用程序的起始路由和视图。它包含预期的所有标准元标记、css 链接和 JavaScript 引用。正文包含一 <div> 个，当请求视图) 时，将放置视图 (的所有内容。 @Scripts.Render使用 Require.js 来运行文件中包含的应用程序代码的main.js入口点。提供初始屏幕来演示如何在应用加载时创建初始屏幕。

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

    @Scripts.Render("~/scripts/vendor")
        <script type="text/javascript" src="~/App/durandal/amd/require.js" 
            data-main="@Url.Content("~/App/main")"></script>
</body>

应用/main.js

文件 main.js 包含加载应用后将立即运行的代码。这是要定义导航路由、设置启动视图以及执行任何设置/引导（例如启动应用程序数据）的位置。

该文件 main.js 定义了几个 durandal 的模块，以帮助启动应用程序。 define 语句有助于解析模块依赖项，以便它们可用于函数。首先启用调试消息，将有关应用程序正在执行哪些事件的消息发送到控制台窗口。 app.start 代码告知 durandal 框架启动应用程序。设置约定以便 durandal 知道所有视图和 viewmodel 分别包含在相同的命名文件夹中。最后， app.setRoot 踢使用预定义entrance动画加载 shell 。

define(['durandal/app', 
        'durandal/viewLocator', 
        'durandal/system', 
        'durandal/plugins/router'],
    function (app, viewLocator, system, router) {

    // Enable debug message to show in the console 
    system.debug(true);

    app.start().then(function () {
        router.useConvention();
        viewLocator.useConvention();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

视图

在文件夹中可以找到 App/views 视图。

shell.html

包含 shell.html HTML 的主控形状布局。所有其他视图将组合在视图的 shell 一侧的某个位置。热毛巾提供 shell 具有三个此类区域的：页眉、内容区和页脚。请求时，每个区域都会加载其他视图形式的内容。

compose页眉和页脚的绑定在热毛巾中硬编码，分别指向 nav 和 footer 视图。节 #content 的撰写绑定绑定到 router 模块的活动项。换句话说，单击导航链接时，相应的视图将加载到此区域中。

<div>
    <header>
        <!--ko compose: {view: 'nav'} --><!--/ko-->
    </header>
     <section id="content" class="main container-fluid">
        <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
        <!--/ko-->
    </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

nav.html

包含 nav.html SPA 的导航链接。例如，可以在此处放置菜单结构。通常，这是 (使用 Knockout) 到 router 模块的数据绑定，以显示在中 shell.js定义的导航。如果模块处于从一个视图导航到另一个视图 (看到router.isNavigating) ，则 Knockout 会查找数据绑定属性并将其绑定到 shell viewmodel，以便使用 Twitter Bootstrap) router显示进度栏 (。

<nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title">Hot Towel SPA</span> 
        </a>
        <div class="btn-group" data-bind="foreach: router.visibleRoutes">
            <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
                class="btn btn-info" href="#"></a>
        </div>
        <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar" style="width: 100px;"></div>
            </div>
        </div>
    </div>
</nav>

home.html和details.html

这些视图包含自定义视图的 HTML。 home单击视图菜单中的链接nav时，home视图将放置在视图的内容区域中shell。这些视图可以增强或替换为你自己的自定义视图。

footer.html

footer.html包含显示在视图底部页脚中的 shell HTML。

ViewModels

ViewModel 位于 App/viewmodels 文件夹中。

shell.js

shell viewmodel 包含绑定到shell视图的属性和函数。通常，这是菜单导航绑定的位置， (查看 router.mapNav 逻辑) 。

define(['durandal/system', 'durandal/plugins/router', 'services/logger'],
    function (system, router, logger) {
        var shell = {
            activate: activate,
            router: router
        };

        return shell;

        function activate() {
            return boot();
        }

        function boot() {
            router.mapNav('home');
            router.mapNav('details');
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

        function log(msg, data, showToast) {
            logger.log(msg, data, system.getModuleId(shell), showToast);
        }
    });

home.js和details.js

这些视图模型包含绑定到 home 视图的属性和函数。它还包含视图的表示逻辑，是数据和视图之间的粘附。

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View'
    };

    return vm;

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
});

服务

服务位于“应用/服务”文件夹中。理想情况下，可以放置未来的服务，例如负责获取和发布远程数据的数据服务模块。

logger.js

热毛巾在 services 文件夹中提供一个 logger 模块。该 logger 模块非常适合用于将消息记录到控制台和弹出 Toast 中的用户。