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?

Answer 1

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

Answer 2

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.

Answer 3

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