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

Question

Я заметил, что все виды в папке App/views имеют тип html, а не cshtml. Как использовать PartialViews и mvc3, к которым я привык, например, бритву?

Answer 1

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

Имея все приложения в виде файлов html, js и css, вы можете compress/minify/uglify все ваше приложение в один файл и иметь сервер, обслуживающий все приложение. Затем приложение просто вызывает веб-службы для получения своих данных. Это может быть контроллер mvc, веб-api или некоторый веб-сервис, который возвращает данные. Эти данные используются для привязки к шаблону браузера и создания отображаемого представления.

У вас также может быть гибридное приложение, в котором ваш сервер может обслуживать несколько дюранных SPA-центров, которые затем будут иметь набор приложений, обслуживаемых одним сайтом.

Я вижу, что многие люди из фона MVC спрашивают, почему я не могу использовать CSHTML-файлы для своего HTML. Короткий ответ - вы можете, но вы теряете много пользы от этого. Когда сервер выводит ваши html-файлы, вы больше не сможете сжимать/минимизировать/убирать все свое приложение, потому что вы полагаетесь на сервер для генерации html для вас.

Если вы предпочитаете cshtml, то традиционно это приложение, богатое AJAX, где ваш пользователь делает вызов некоторого uri, а сервер генерирует HTML на основе некоторых данных, отправляет этот html обратно пользователю, где он вставлен где-то на экране. В этом процессе у вас есть богатый сайт AJAX, но не SPA. Вы теряете возможность сделать это приложение родным мобильным приложением или даже настольным приложением.

Answer 2

Ваш SPA будет жить с ограничениями вашей страницы, предоставленной MVC.

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

• Страницы MVC может предоставить меню, боковой панели и т.д. Было бы, конечно, можно слушать Дюрандаль события (ы), зацепив в Pub/Sub модели, представленной в клиенте SPA.

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

Существует множество способов смешивания двух технологий, если это необходимо.

Answer 3

Если вы заинтересованы в использовании Razor/CSHTML с Дюрандала и Knockout есть вариант с открытым исходным кодом: FluentKnockoutHelpers. Он предлагает большую часть «приятных, вспомогательных» частей ASP.NET MVC, позволяющих использовать потрясающие способности Durandal и Knockout практически без сбоев.

Чтобы быстро решить отличную точку Evan Ларсена о минификации (и т.д.): Поскольку FluentKnockoutHelpers не работают никакой логики во время выполнения и только генерирующей разметки он мертв просто генерировать статические HTML-файлы для производства сборки с использованием популярный проект RazorEngine, который позволяет запускать Razor и генерировать HTML из C#.Это может быть запущена непосредственно перед требуемой стадии производства сборки Дюрандаль (который дает минификация и т.д.)

• Source

• Live demo using Durandal.js

В двух словах он предоставляет кучу возможностей что делает разработку Durandal/Knockout так же просто, как ASP.NET MVC. (Вы просто предоставляете тип C#, для которого ваша модель JavaScript основана на большинстве функций.) Вам нужно только написать JavaScript и не скомпилированную разметку для сложных случаев, что неизбежно и не отличается от MVC! (За исключением MVC ваш код будет также, вероятно, в конечном итоге также будет большой JQuery беспорядок, который почему вы используете Дюрандаль/Knockout в первую очередь!)

Особенности:

• Безболезненно генерировать Knockout синтаксис с сильно типизированных, свободно, лямбда-выражения Помощники похож на ASP.NET MVC
• Rich 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> 

Посмотрите на Source или Live Demo для исчерпывающего обзор возможностей FluentKnockoutHelper в нетривиальном приложении Durandal.js.

Чтобы быстро найти превосходную точку зрения Эвана Ларсена о минимизации (и т. Д.): Поскольку FluentKnockoutHelpers не запускает никакой логики во время выполнения и просто генерирует разметку, она мертва просто для создания статических HTML-файлов для вашей сборки с использованием популярного RazorEngine project, который позволяет запускать Razor и генерировать HTML из C#. Это может быть выполнено непосредственно перед тем, как необходимо выполнить производственный шаг Durandal (который дает вам оценку и т. Д.)