Can Razor engine and ember.js work together?

Question

I am working on a project in which another developer developed the user interface as a standalone solution only on the client side, using the ember.js infrastructure.

I was asked to transfer this work to an ASP.NET MVC3 project.

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

I correctly understood that 2 technologies (ASP MVC3 and ember.js) cannot work together?

Answer 1

One approach would be to have descriptor templates in a resource file (resx) and add them to Ember in an anonymous function like 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 initialize method.

A resource file is also a good idea when you have support for multiple languages.

Answer 2

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

However, if you get some syntax problems , then you need to analyze the rendering syntax (Razor, web forms, Spark, etc.) of the syntax in parallel with the js library .

For example, jQuery uses $ sign as Alias, which can be replaced. Look at these links - Replace "$" (dollar sign) with "jQuery"

However, if it does not work, you can probably revise your viewing mechanism.

Answer 3

I am working on an ASP.NET MVC 4 application that uses Ember heavily and has no problems.

A double brace case has a very simple way: just use @: Everything after @: interpreted as plain text. So this markup of the razor with the rudder expression will be valid:

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

Update: I am currently using version Ember 1.6 - 1.9 and version Ember Data 1.0.0-beta-8 - 1.0.0-beta-12 with ASP.NET MVC 5.2 - works great. All projects on the latest Ember 1.9, Ember Data and Handlebars 2.0 will be migrating soon.

Answer 4

You can use the blocks described in detail at 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 accessible correctly.

This means that you are not completely filling the requirements of your customers by doing this. A regular ASP.Net MVC developer will still have to learn ember.js to work with this code base. What you really have to do is rewrite it using ASP.Net MVC concepts such as creating pages from models, partial views, etc.