Hot Towel 範本

  • 發行項

作者 ：Mads Kristensen

熱管板 MVC 範本是由 John Papa 撰寫

選擇要下載的版本：

Visual Studio 2012 的經常性存取 MVC 範本

適用于 Visual Studio 2013 的經常性Visual Studio 2013 MVC 範本

經常性存取：因為您不想要前往 SPA 而不需要！

想要建置 SPA，但無法決定要從何處開始？ 使用熱水器，並以秒為單位，您將擁有 SPA 和建置所需的所有工具！

經常性使用 ASP.NET 建立單頁應用程式 (SPA) 的絕佳起點。 現成可用的程式碼、檢視導覽、資料系結、豐富的資料管理和簡單但簡潔的樣式，提供模組化結構。 熱定位器提供建置 SPA 所需的一切，因此您可以專注于您的應用程式，而不是管子。

深入瞭解如何從 John Papa 的影片、教學課程和 Pluralsight 課程建置 SPA。

應用程式結構

經常性存取區 SPA 提供應用程式資料夾，其中包含定義應用程式的 JavaScript 和 HTML 檔案。

在 [應用程式] 資料夾內：

  • durandal
  • 服務
  • viewmodels
  • 檢視

[應用程式] 資料夾包含模組的集合。 這些模組會封裝功能，並在其他模組上宣告相依性。 views 資料夾包含應用程式的 HTML，viewmodels 資料夾包含檢視的呈現邏輯， (常見的 MVVM 模式) 。 services 資料夾非常適合用來存放應用程式可能需要的任何一般服務，例如 HTTP 資料擷取或本機儲存體互動。 多個 ViewModel 通常會從服務模組重複使用程式碼。

ASP.NET MVC 伺服器端應用程式結構

經常性存取器建置在熟悉且功能強大的 ASP.NET MVC 結構上。

  • App_Start
  • Content
  • 控制器
  • 模型
  • 指令碼
  • 檢視

透過 Visual Studio 2012 Hot#Spa 範本安裝

熱器可以安裝為 Visual Studio 2012 範本。 只要按一下 File | New Project 並選擇 ASP.NET MVC 4 Web Application 。 然後選取 [熱器單頁應用程式] 範本並執行！

透過 NuGet 套件安裝

經常性存取層也是 NuGet 套件，可增強現有的空白 ASP.NET MVC 專案。 只要使用 Nuget 安裝，然後執行！

Install-Package HotTowel

如何建置在經常性存取區上？

只要開始新增程式碼！

  1. 新增您自己的伺服器端程式碼，最好是 Entity Framework 和 WebAPI (，這在Breeze.js)
  2. 將檢視新增至 App/views 資料夾
  3. 將 viewmodels 新增至 App/viewmodels 資料夾
  4. 將 HTML 和一個元素資料系結新增至新的檢視
  5. 更新 中的導覽路由 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>

App/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包含 SPA 的導覽連結。 例如，您可以在這裡放置功能表結構。 這通常是將資料系結 (使用) 模組 router 來顯示您在 中 shell.js 定義的導覽。 在模組從一個檢視流覽到另一個檢視之間流覽時，會尋找資料系結屬性，並將這些屬性系結至 shell viewModel 以顯示流覽路由，並使用 Twitter Bootstrap) router 顯示進度 (欄 () ) router.isNavigating 。

<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

ViewModels 位於 App/viewmodels 資料夾中。

shell.js

shellViewModel 包含系結至 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

這些 ViewModel 包含系結至 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;
    }
});

服務

服務位於 [應用程式/服務] 資料夾中。 在理想情況下，您可以放置未來服務，例如負責取得和張貼遠端資料的 dataservice 模組。

logger.js

經常性存取器會在 services 資料夾中提供 logger 模組。 此 logger 模組非常適合用來將訊息記錄到主控台，以及快顯快顯通知中的使用者。