Can Razor engine and ember.js work together?

Question

I am working on a project where another developer has developed a UI as a stand alone client-side only solution using the ember.js framework.

I have been asked to move this work to an ASP.NET MVC3 project.

Problem is, ember.js uses braces and double braces in the syntax, and this seems to interfere with the razor engine used by MVC3.

Am I right in thinking that the 2 technologies (ASP MVC3 and ember.js) cannot work together?

Why were you asked to move it into ASP.Net MVC? Is there a problem with the app as it exists today? — Shane Courtrille, Jul 04 '12 at 12:57
It's a requirement from the customer. They're a company using mainly .NET / .NET MVC. The UI was done by a developer with mainly php background. — Valere Speranza, Jul 04 '12 at 13:01

score 3 · Answer 1 · answered Jul 04 '12 at 17:49

One approach would be having the handlebars templates in a resource file (resx) and add them to Ember in an anonymous function similar to this:

<script type="text/javascript" src="path/to/ember.js">
<script type="text/javascript" src="path/to/your/app.js">
<script type="text/javascript">
    (function() {
        Ember.TEMPLATES["your template name"] = Ember.Handlebars.compile('<%= template as string from the resource file goes here %>');
    })();

    App.initialize();
</script>

This should happen before you call your application's initialize method

The resource file is also a good idea when you have multi-language support

To support precompiled templates on the server-side, I recommend using csharp-ember-handlebars library (install via NuGet) so you won't have any conflict with razor, haml, aspx or any view engine anymore. Here's the project in github https://github.com/Myslik/csharp-ember-handlebars with a sample Web API tempalte (WIP) — MilkyWayJoe, Jan 07 '13 at 19:13

score 1 · Answer 2 · edited May 23 '17 at 12:07

Short Answer: Yes, any js library can work with asp.net mvc

However, if you get some syntax problems then specific view-rendering engine (Razor, web-forms, Spark, etc.) syntax needs to be analysed in parallel with js library.

For example, jQuery uses $ sign as Alias, that can be replaced. Look at this references - Replace “$”(dollar Sign) with “JQuery”

However, if it does not work then you may probably re-consider your view-engine.

Vitaliy · Answer 3 · 2014-12-15T20:56:35.130

I'm working on ASP.NET MVC 4 application which uses Ember heavily and do not have any problems.

The case with double braces has very easy workaround: just use @:. Everything after @: is interpreted as plain text. So, this razor markup with handlebars expression will be valid:

<ul>
@if (Model.SomeCondition)
{
    @:{{#each product in products}}
    <li>{{product.name}}</li>
    @:{{/each}}
}
</ul>

Update: Currently I'm using Ember 1.6 - 1.9 version and Ember Data 1.0.0-beta-8 - 1.0.0-beta-12 version with ASP.NET MVC 5.2 - works great. Soon will migrate all projects on latest Ember 1.9, Ember Data and Handlebars 2.0

score -1 · Answer 4 · answered Jul 04 '12 at 13:05

-1

You should be able to use the blocks detailed in http://weblogs.asp.net/scottgu/archive/2010/12/15/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax.aspx to wrap your ember templates so that they are available correctly.

That said you aren't really fullfilling your customers requirements by doing this. A normal ASP.Net MVC developer will still have to learn ember.js to work with this code base. What you should really be doing is rewriting it using ASP.Net MVC concepts like creating pages from models, partial views etc.

answered Jul 04 '12 at 13:05

Shane Courtrille

13,960
22
76
113

Not really. You can not rewrite the same behavior with ASP.NET MVC as it is a server-side framework that hence only receives http requests as input. Ember.js on the other hand is a client-side framework that receives browser events and thus can react more sophisticated to user interaction. For a nice comparison between client-side and server-side mvc see: [link](http://emberjs.com/guides/ember_mvc/) – manuel_mitasch Jul 06 '12 at 08:19
There are reasons to use ASP.NET MVC and reasons to use Ember. Writing things "using ASP.NET MVC concepts" may not be what his customer is wanting. Just because they are required to use ASP.NET MVC as the server-side technology doesn't mean he can no longer leverage a client-side framework and using Ember doesn't necessarily prevent "fulfilling [the] customer's requirements". – J.R. Garcia Nov 20 '12 at 02:26

Can Razor engine and ember.js work together?

4 Answers4