Aracılığıyla paylaş


Hot Towel şablonu

tarafından Mads Kristensen

Sıcak Havlu MVC Şablonu John Papa tarafından yazılmıştır

hangi sürümün indirileceğini seçin:

Visual Studio 2012 için Hot Towel MVC Şablonu

Visual Studio 2013 için Sıcak Havlu MVC Şablonu

Sıcak Havlu: Çünkü SPA'ya biri olmadan gitmek istemezsiniz!

SPA oluşturmak istiyor ancak nereden başlayacağına karar veremiyor musunuz? Hot Towel kullanın ve saniyeler içinde bir SPA'nız ve üzerine inşa etmeniz gereken tüm araçlara sahip olacaksınız!

Hot Towel, ASP.NET ile Tek Sayfalı Uygulama (SPA) oluşturmak için harika bir başlangıç noktası oluşturur. İlk olarak kodunuz için modüler bir yapı sağlar, gezintiyi, veri bağlamayı, zengin veri yönetimini ve basit ama zarif bir stil sunar. Hot Towel, SPA oluşturmak için ihtiyacınız olan her şeyi sağlar, böylece tesisata değil uygulamanıza odaklanabilirsiniz.

John Papa'nın videoları, öğreticileri ve Pluralsight kurslarından SPA oluşturma hakkında daha fazla bilgi edinin.

Uygulama Yapısı

Hot Towel SPA, uygulamanızı tanımlayan JavaScript ve HTML dosyalarını içeren bir Uygulama klasörü sağlar.

Uygulama klasörünün içinde:

  • durandal
  • services
  • görünüm modelleri
  • görünümler

Uygulama klasörü bir modül koleksiyonu içerir. Bu modüller işlevleri kapsüller ve diğer modüllerde bağımlılıkları bildirir. Görünümler klasörü uygulamanızın HTML'sini, viewmodels klasörü ise görünümler için sunu mantığını (ortak bir MVVM düzeni) içerir. Services klasörü, http veri alma veya yerel depolama etkileşimi gibi uygulamanızın ihtiyaç duyabileceği tüm yaygın hizmetleri barındırmak için idealdir. Birden çok görünüm modelinde hizmet modüllerinden kodu yeniden kullanmak yaygın bir durumdur.

MVC Sunucu Tarafı Uygulama Yapısını ASP.NET

Hot Towel tanıdık ve güçlü ASP.NET MVC yapısını temel alır.

  • App_Start
  • Content
  • Denetleyiciler
  • Modeller
  • Betikler
  • Görünümler

Visual Studio 2012 Hot Towel SPA Şablonu aracılığıyla yükleme

Hot Towel, Visual Studio 2012 şablonu olarak yüklenebilir. Öğesine tıklayıp File | New Project öğesini seçmeniz yeter.ASP.NET MVC 4 Web Application Sonra 'Sıcak Havlu Tek Sayfalı Uygulama' şablonunu seçin ve çalıştırın!

NuGet Paketi aracılığıyla yükleme

Hot Towel ayrıca mevcut boş ASP.NET MVC projelerini genişleten bir NuGet paketidir. Nuget kullanarak yüklemeniz ve ardından çalıştırmanız yeter!

Install-Package HotTowel

Sıcak havlu üzerine nasıl inşa ederim?

Kod eklemeye başlamanız yeterlidir!

  1. Tercihen Entity Framework ve WebAPI (Breeze.js ile gerçekten parlayan) kendi sunucu tarafı kodunuzu ekleyin
  2. Klasöre App/views görünüm ekleme
  3. Klasöre App/viewmodels görünüm modelleri ekleme
  4. Yeni görünümlerinize HTML ve Knockout veri bağlamaları ekleme
  5. içindeki gezinti yollarını güncelleştirme shell.js

HTML/JavaScript için izlenecek yol

Views/HotTowel/index.cshtml

index.cshtml, MVC uygulamasının başlangıç yolu ve görünümüdür. Beklediğiniz tüm standart meta etiketleri, css bağlantılarını ve JavaScript başvurularını içerir. Gövde, tüm içeriğin (görünümleriniz) istendiğinde yerleştirileceği tek <div> bir içerik içerir. , @Scripts.Render Require.js kullanarak dosyanın içerdiği main.js uygulama kodunun giriş noktasını çalıştırır. Uygulamanız yüklenirken giriş ekranı oluşturmayı göstermek için bir giriş ekranı sağlanır.

<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>

Uygulama/main.js

Dosya, main.js uygulamanız yüklenir yüklenmez çalışacak kodu içerir. Burası gezinti yollarınızı tanımlamak, başlangıç görünümlerinizi ayarlamak ve uygulamanızın verilerini hazırlama gibi herhangi bir kurulum/önyükleme gerçekleştirmek istediğiniz yerdir.

dosyası, main.js uygulamanın başlatılmasına yardımcı olmak için durandal'ın birkaç modülünü tanımlar. define deyimi, işlev için kullanılabilir olmaları için modül bağımlılıklarının çözümlenmesine yardımcı olur. İlk olarak hata ayıklama iletileri etkinleştirilir ve bu da uygulamanın konsol penceresine hangi olayları gerçekleştirdiği hakkında iletiler gönderir. app.start kodu durandal framework'e uygulamayı başlatmasını söyler. Kurallar, durandal'ın sırasıyla tüm görünümlerin ve görünüm modellerinin aynı adlandırılmış klasörlerde bulunduğunu bilmesi için ayarlanır. Son olarak, app.setRoot tekmeler önceden tanımlanmış entrance bir animasyon kullanarak öğesini shell yükler.

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');
    });
});

Görünümler

Görünümler klasöründe bulunur App/views .

shell.html

, shell.html HTML'nizin ana düzenini içerir. Diğer görünümlerinizin tümü, görünümünüzün shell yanında bir yerde oluşturulacaktır. Hot Towel üç bölge sağlar shell : üst bilgi, içerik alanı ve alt bilgi. Bu bölgelerin her biri, istendiğinde diğer görünümlerle birlikte yüklenir.

compose Üst bilgi ve alt bilgi bağlamaları, sırasıyla ve footer görünümlerini işaret etmek için nav Hot Towel'da sabit kodlanmıştır. Bölümün #content oluşturma bağlaması modülün router etkin öğesine bağlıdır. Başka bir deyişle, bir gezinti bağlantısına tıkladığınızda ilgili görünüm bu alana yüklenir.

<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 için gezinti bağlantılarını içerir. Burası, örneğin menü yapısının yerleştirilebileceği yerdir. Genellikle bu, içinde tanımladığınız gezintiyi router görüntülemek için modüle veri bağlıdır (Knockout kullanılarak).shell.js Knockout, veri bağlama özniteliklerini arar ve bunları görünüm modeline shell bağlayarak gezinti yollarını görüntüler ve modül bir görünümden diğerine geçişin ortasındaysa router bir ilerleme çubuğu (Twitter Bootstrap kullanarak) gösterir (bkz 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 ve details.html

Bu görünümler özel görünümler için HTML içerir. Görünümün menüsündeki homenav bağlantıya tıklandığında, home görünüm görünümün içerik alanına shell yerleştirilir. Bu görünümler değiştirilebilir veya kendi özel görünümlerinizle değiştirilebilir.

footer.html

, footer.html alt bilgide, görünümün en altında görünen HTML'yi shell içerir.

Görünüm Modelleri

ViewModels klasöründe bulunur App/viewmodels .

shell.js

Görünüm shell modeli, görünüme shell bağlı özellikler ve işlevler içerir. Genellikle burası menü gezinti bağlamalarının bulunduğu yerdir (mantığa router.mapNav bakın).

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 ve details.js

Bu görünüm modelleri, görünüme home bağlı özellikleri ve işlevleri içerir. ayrıca görünümün sunu mantığını içerir ve veriler ile görünüm arasındaki tutkaldır.

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;
    }
});

Hizmetler

Hizmetler, Uygulama/hizmetler klasöründe bulunur. İdeal olarak, uzak verileri almak ve göndermekle sorumlu olan bir veri hizmeti modülü gibi gelecekteki hizmetleriniz yerleştirilebilir.

logger.js

Hot Towel, hizmetler klasöründe bir logger modül sağlar. Modül logger , iletileri konsola ve açılır bildirimlerde kullanıcıya günlüğe kaydetmek için idealdir.