Как да използвате частични изгледи с Durandal.js, mvc3

Durandal е предназначен за създаване на приложение, което живее изцяло в една страница. Предимството на това е, че потребителското изживяване е подобно на настолно приложение. Също така, това позволява на приложението лесно да бъде пренесено към phonegap, където може да съществува като собствено мобилно приложение или дори да бъде пренесено към настолно приложение, използващо appjs.

Като имате цялото си приложение като html, js и css файлове, можете да компресирате/минифицирате/углифицирате цялото ви приложение в един файл и имате сървър, който да ви обслужва цялото приложение. Тогава приложението просто извиква уеб услуги, за да получи своите данни. Което може да бъде mvc контролер, уеб API или някаква уеб услуга, която връща обратно данни. Вие използвате тези данни, за да се свържете с шаблон на браузър и да генерирате изглед, който да бъде показан.

Можете също така да имате хибридно приложение, при което сървърът ви може да обслужва множество SPA от Durandal, които след това ще имате колекция от приложения, обслужвани от един сайт.

Виждам, че много хора идват от MVC фона и се питат защо не мога да използвам CSHTML файлове за моя HTML. Краткият отговор е, че можете, но губите много ползи от това. Когато накарате сървъра да визуализира вашите html файлове, тогава вече не можете да компресирате/минимизирате/углифицирате цялото си приложение, защото разчитате на сървъра да генерира html вместо вас.

Ако предпочитате cshtml, тогава традиционно това е за приложение, богато на AJAX, където вашият потребител прави извикване на някакъв uri и сървърът генерира HTML въз основа на някои данни, изпраща този изобразен html обратно на потребителя, където е поставен някъде в екрана . С този процес това, което имате, е богат на AJAX сайт, но не и SPA. Губите способността да направите това приложение родно мобилно приложение или дори приложение за настолни компютри.

Ако се интересувате от използването на Razor/CSHTML с Durandal и Knockout има опция с отворен код: FluentKnockoutHelpers. Той предлага голяма част от „хубавите, помощни“ части на ASP.NET MVC, позволявайки ви да използвате страхотните способности на Durandal и Knockout почти без грешки.

За да отговорим бързо на отличната гледна точка на Evan Larsen относно минимизирането (и т.н.): Тъй като FluentKnockoutHelpers не изпълнява никаква логика по време на изпълнение и просто генерира маркиране, е много лесно да генерирате статични HTML файлове за вашата производствена компилация използвайки популярния проект RazorEngine, който ви позволява да стартирате Razor и да генерирате HTML от C#. Това може да се изпълни точно преди необходимата стъпка за изграждане на продукция на Durandal (която ви дава минимизирането и т.н.)

• Източник

• Демо на живо с помощта на Durandal.js

Накратко, той предоставя куп функции, които правят разработването на Durandal/Knockout също толкова лесно, колкото ASP.NET MVC. (Вие просто предоставяте C# тип, на който се основава вашият JavaScript модел за повечето от функциите.) Трябва само да напишете JavaScript и некомпилирано маркиране за сложни случаи, което е неизбежно и не се различава от MVC! (Освен в MVC вашият код вероятно ще се окаже и голяма бъркотия в jQuery, поради което използвате Durandal/Knockout на първо място!)

Характеристики:

• Безболезнено генерирайте синтаксис на Knockout със строго въведени, плавни помощници за ламбда изрази, подобни на ASP.NET MVC
• Богата поддръжка на Intellisense и компилатор за генериране на синтаксис
• Плавният синтаксис улеснява създаването на персонализирани помощници или разширяването на вграденото
• OSS алтернатива на ASP.NET MVC помощници: не се колебайте да добавите незадължителни функции, които всеки в общността може да използва
• Безболезнено осигурява валидиране на базата на .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 и можете да направите това със стил с Intellisense и компилатор в Razor / 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>

Разгледайте Източника или Демо на живо за изчерпателен преглед на функциите на FluentKnockoutHelper в нетривиално Durandal.js приложение.

За да отговорим бързо на отличната гледна точка на Evan Larsen относно минимизирането (и т.н.): Тъй като FluentKnockoutHelpers не изпълнява никаква логика по време на изпълнение и просто генерира маркиране, е изключително лесно да генерирате статични HTML файлове за вашата производствена компилация, като използвате популярния Проект RazorEngine, който ви позволява да стартирате Razor и да генерирате HTML от C#. Това може да се изпълни точно преди необходимата стъпка за изграждане на продукция на Durandal (която ви дава минимизирането и т.н.)

Вашият SPA ще живее в границите на вашата MVC изобразена страница.

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

• MVC страниците биха могли да предоставят менюто, страничната лента и т.н. Със сигурност би било възможно да слушате събитието(ята) на Durandal чрез свързване към модела Pub/Sub, предоставен в SPA на клиента.

• Използвайте MVC контролера и доставете различни главни страници, пакети към различни SPA. Всяка CSHTML страница може да извиква различни файлове main.js (main-viewport, main-uipanel.js и т.н.).

Има много начини за смесване на двете технологии, ако е необходимо.