Ember.js with an external steering wheel pattern

Question

So, I'm new to Ember.js , and it's been a couple of hours since I'm stuck with this. I play with this bloggr client and I want to download these handlebars templates from external files.

The "about" template should be displayed when the user clicks on the about page in the panel. Here's a short code, so you don’t have to dig a lot (I believe this will be easy for advanced users)

Template inside. html as shown in the example

 <script type="text/x-handlebars" id="about"> <div class='about'> <p>Some text to be shown when users click ABOUT.</p> </div> 

Now what I did is take the x-handlebar from the html page and put it (without <script type...> ) and then put it in hbs/about.hbs

Now, inside the html page, I did something like this.

 $.ajax({ url: 'hbs/about.hbs', async: false, success: function (resp) { App.About = Ember.View.extend({ template: Ember.Handlebars.compile(resp), }); } }); 

The ajax result contains the contents of the .hbs page, then I have to compile it so that Ember can display it, right? Think what I did. But this is until I come. Is this what I did right? What is the next step? I believe that I need to add the contents of an ajax call to body or so.

Thanks in advance, after searching for SO, I still could not start it.

Answer 1

You can attach a template to the available templates object like this:

 Ember.TEMPLATES.cow = Ember.Handlebars.compile("I'm a cow {{log this}}"); 

Or in your case there might be something like this:

 var url = 'hbs/about.hbs', templateName = url.replace('.hbs', ''); Ember.$.ajax({ url: url, async: false, success: function (resp) { Em.TEMPLATES[templateName] = Ember.Handlebars.compile(resp); } }); 

Here's a lazy example of this in a finished application:

http://emberjs.jsbin.com/apIRef/1/edit

To be honest, pre-compiling the templates beforehand (server side) is more efficient for the end user.

Pre-compilation takes the raw wheels and turns it into many javascript statements to use when building your views.

When the DOM is ready, Ember scans the DOM for script elements of type "text / x-handlebars" and calls are compiled according to their contents. Then it adds the results to the Ember.TEMPLATES object with the name from the data-template-name attribute. This can add completely unnecessary download times to applications.

For example, when we sent the message "I am a cow {{log this}}", it was converted to the following javascript method

 function anonymous(Handlebars,depth0,helpers,partials,data /**/) { this.compilerInfo = [4,'>= 1.0.0']; helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {}; var buffer = '', hashTypes, hashContexts, escapeExpression=this.escapeExpression; data.buffer.push("I'm a cow "); hashTypes = {}; hashContexts = {}; data.buffer.push(escapeExpression(helpers.log.call(depth0, "", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data}))); return buffer; } 

comes down to something ugly:

 function anonymous(e,t,n,r,i){this.compilerInfo=[4,">= 1.0.0"];n=this.merge(n,Ember.Handlebars.helpers);i=i||{};var s="",o,u,a=this.escapeExpression;i.buffer.push("I'm a cow ");o={};u={};i.buffer.push(a(n.log.call(t,"",{hash:{},contexts:[t],types:["ID"],hashContexts:u,hashTypes:o,data:i})));return s} 

Depending on what you are doing, you can compile and combine your templates before sending and send them in html to avoid wasting time compiling the client part of the templates.