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

Durandal предназначен для создания приложения, полностью живущего внутри одной страницы. Преимущество этого заключается в том, что пользовательский интерфейс похож на настольное приложение. Кроме того, это позволяет легко портировать приложение на phonegap, где оно может работать как родное мобильное приложение или даже переносить на настольное приложение с использованием appjs.

Имея все ваше приложение в виде файлов html, js и css, вы можете сжимать/минимизировать/uglify все ваше приложение в один файл, и сервер будет обслуживать все приложение. Затем приложение просто вызывает веб-службы для получения своих данных. Это может быть контроллер 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 почти без ошибок.

Чтобы быстро ответить на прекрасное замечание Эвана Ларсена о минимизации (и т. д.): поскольку 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 и аннотаций данных в нескольких строках кода для всех текущих/будущих типов приложений и изменений.
• Фабрика объектов 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.

Чтобы быстро ответить на прекрасное замечание Эвана Ларсена о минимизации (и т. Д.): Поскольку 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 и т. д.).

Есть много способов смешивать две технологии, если это необходимо.