CODEWITHSUNDEEP
asp.net-mvc-3razorember.jsmustachehandlebars.js
Valere Speranza
Valere Speranza

Reputation: 111

Can Razor engine and ember.js work together?

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?

Upvotes: 8

Views: 3693

Answers (4)

Vitaliy
Vitaliy

Reputation: 100

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

Upvotes: 1

Yusubov
Yusubov

Reputation: 5843

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.

Upvotes: 1

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

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

Upvotes: 3

Shane Courtrille
Shane Courtrille

Reputation: 14107

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.

Upvotes: -1

Related Questions