Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you are interested in using <strong>Razor/CSHTML with Durandal and Knockout</strong> there is an open source option: <strong>FluentKnockoutHelpers</strong>. It offers much of the 'nice, helper' parts of ASP.NET MVC allowing you to use the awesome abilities of Durandal and Knockout with almost no downfalls.</p> <p><strong>To quickly address Evan Larsen's excellent point</strong> about minification (etc.): Since FluentKnockoutHelpers isn't running any logic at run time and is just generating markup it is dead simple to generate static HTML files for your production build using the popular RazorEngine project which lets you run Razor and generate HTML from C#. This could be run right before Durandal's required production build step (which gives you the minification etc.)</p> <ul> <li><p><a href="https://github.com/johnculviner/FluentKnockoutHelpers" rel="nofollow">Source</a></p></li> <li><p><a href="http://durandaldemo.apphb.com/" rel="nofollow">Live demo using Durandal.js</a></p></li> </ul> <p>In a nutshell it provides a bunch of features which makes doing Durandal/Knockout development just as easy as ASP.NET MVC. (You simply provide a C# type that your JavaScript model is based off of for most of the features.) You only have to write JavaScript and un-compiled markup for complicated cases which is unavoidable and no different than MVC! (Except in MVC your code would also likely end up would also be a big jQuery mess which is why you are using Durandal/Knockout in the first place!)</p> <p><strong>Features:</strong></p> <ul> <li>Painlessly generate Knockout syntax with strongly typed, fluent, lambda expression helpers similar to ASP.NET MVC </li> <li>Rich intellisense and compiler support for syntax generation</li> <li>Fluent syntax makes it a breeze to create custom helpers or extend whats built in</li> <li>OSS alternative to ASP.NET MVC helpers: feel free to add optional features that everyone in the community can use</li> <li>Painlessly provides validation based on .NET types and DataAnnotations in a few lines of code for all current/future application types and changes</li> <li>Client side JavaScript object factory (based on C# types) to create new items in for example, a list, with zero headaches or server traffic</li> </ul> <p><strong>Example without FluentKnockoutHelpers</strong></p> <pre><code>&lt;div class="control-group"&gt; &lt;label for="FirstName" class="control-label"&gt; First Name &lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" data-bind="value: person.FirstName" id="FirstName" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label for="LastName" class="control-label"&gt; Last Name &lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" data-bind="value: person.LastName" id="LastName" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;h2&gt; Hello, &lt;!-- ko text: person.FirstName --&gt;&lt;!-- /ko --&gt; &lt;!-- ko text: person.LastName --&gt;&lt;!-- /ko --&gt; &lt;/h2&gt; </code></pre> <p><strong>Provide FluentKnockoutHelpers with a .NET type and you can do this in style with Intellisense and a compiler in Razor / CSHTML</strong></p> <pre><code>@{ var person = this.KnockoutHelperForType&lt;Person&gt;("person", true); } &lt;div class="control-group"&gt; @person.LabelFor(x =&gt; x.FirstName).Class("control-label") &lt;div class="controls"&gt; @person.BoundTextBoxFor(x =&gt; x.FirstName) &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; @person.LabelFor(x =&gt; x.LastName).Class("control-label") &lt;div class="controls"&gt; @person.BoundTextBoxFor(x =&gt; x.LastName) &lt;/div&gt; &lt;/div&gt; &lt;h2&gt; Hello, @person.BoundTextFor(x =&gt; x.FirstName) @person.BoundTextFor(x =&gt; x.LastName) &lt;/h2&gt; </code></pre> <p>Take a look at the <strong><a href="https://github.com/johnculviner/FluentKnockoutHelpers" rel="nofollow">Source</a></strong> or <strong><a href="http://durandaldemo.apphb.com/" rel="nofollow">Live Demo</a></strong> for an exhaustive overview of FluentKnockoutHelper's features in a non-trivial Durandal.js application.</p> <p>To quickly address Evan Larsen's excellent point about minification (etc.): Since FluentKnockoutHelpers isn't running any logic at run time and is just generating markup it is dead simple to generate static HTML files for your production build using the popular <a href="https://github.com/Antaris/RazorEngine" rel="nofollow">RazorEngine project</a> which lets you run Razor and generate HTML from C#. This could be run right before Durandal's required production build step (which gives you the minification etc.)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload