javascript - Ember.js with external handlebars template - Stack Overflow

admin管理员组

文章数量:1278952

So, I'm kind of new to Ember.js and it's been a couple of hours since I'm stuck with this. I'm playing with this bloggr client and what I want to acplish is to load those handlebars templates from external files.

The "about" template should render when the user clicks the about page in the panel. Here's the code in short so you dont have to dig that much (I believe it'll be easy for experienced 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've done is to take that x-handlebar code away from the html page and placed it (without the <script type...>) and then put it in hbs/about.hbs

Now, inside the html page I've done something like this.

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

The result of the ajax holds the content of the .hbs page, then I have to pile it so Ember can render it, right? Think that's what I did. But this is as far as I've e. Is what I've done right? What's the next move? I believe I have to append the content of the ajax call to the body or so.

Thanks in advance, after searching through SO I still wasn't able to make it run.

So, I'm kind of new to Ember.js and it's been a couple of hours since I'm stuck with this. I'm playing with this bloggr client and what I want to acplish is to load those handlebars templates from external files.

The "about" template should render when the user clicks the about page in the panel. Here's the code in short so you dont have to dig that much (I believe it'll be easy for experienced 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've done is to take that x-handlebar code away from the html page and placed it (without the <script type...>) and then put it in hbs/about.hbs

Now, inside the html page I've done something like this.

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

The result of the ajax holds the content of the .hbs page, then I have to pile it so Ember can render it, right? Think that's what I did. But this is as far as I've e. Is what I've done right? What's the next move? I believe I have to append the content of the ajax call to the body or so.

Thanks in advance, after searching through SO I still wasn't able to make it run.

• javascript
• ajax
• ember.js
• handlebars.js

Share Improve this question Follow edited Aug 4, 2014 at 2:29 Kingpin2k 47.4k1010 gold badges7979 silver badges9696 bronze badges asked Nov 9, 2013 at 1:20 Daniel Sh.Daniel Sh. 2,07466 gold badges4242 silver badges6767 bronze badges 1

• As an aside, I would rement using Yeoman and generator-ember to scaffold out your project. It is a great jumpstart to Ember so you can immediately get to the project rather than this sort of configuration exercise. You want the final product to be done in as few requests and as quickly as possible. Programmatically retrieving templates like this won't perform well. You get linting and minification with Yeoman. yeoman.io – Steve H. Commented Nov 9, 2013 at 1:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You can attach a template to the object of available templates simply like so:

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

Or in your case maybe 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.pile(resp);
  }         
});

Here's a lazy example of it being done in the application ready:

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

To be honest prepiling the templates beforehand (server side) is more performant for the end user.

Prepiling takes the raw handlebars and turns it into a plethora of javascript statements for use when building your views.

When the DOM is ready Ember scans the DOM for script elements of type "text/x-handlebars" and calls pile on their contents. It then adds the results to the Ember.TEMPLATES object with the name from the data-template-name attribute. This can add some pletely unnecessary load time to the application.

For example when we sent in "I'm a cow {{log this}}" it was converted into the following javascript method

function anonymous(Handlebars,depth0,helpers,partials,data /**/) {
  this.pilerInfo = [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;
}

minimized to something ugly like this:

function anonymous(e,t,n,r,i){this.pilerInfo=[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 your back-end is you can pile and bundle your templates before hand and send them down in the html so you can avoid spending time piling the templates client side.

本文标签： javascriptEmberjs with external handlebars templateStack Overflow