Ember.js与外部把手模板 [英] Ember.js with external handlebars template

问题描述

所以，我有点新 Ember.js ，它已经几个小时，因为我坚持这一点。我玩这个 BLOGGR客户什么，我要完成的任务是装载那些车把从外部文件模板。

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 accomplish is to load those handlebars templates from external files.

当用户点击页面左右面板中的关于模板应呈现。 这里的code在短，所以你不必掏那么多（我相信这将是很容易有经验的用户）

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)

模板中。 HTML 所示的例子

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

现在我所要做的是采取 X-车把 code远离 HTML 页面，并把它（不＆LT;脚本类型...＆GT; ），然后把它放在 HBS / about.hbs

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

现在，在HTML页面里我做了这样的事情。

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.compile(resp),
      });
    }         
  });

阿贾克斯的结果持有.hbs页面的内容，那么我必须编译它，灰烬可以渲染它，对不对？想这就是我所做的。但是，这是据我已经来了。是我做了什么吧？什么是下一步的行动？我相信我有追加Ajax调用到体左右。内容

The result of the ajax holds the content of the .hbs page, then I have to compile it so Ember can render it, right? Think that's what I did. But this is as far as I've come. 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.

推荐答案

您可以将一个模板可用模板只是像这样的目标：

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

Ember.TEMPLATES.cow = Ember.Handlebars.compile("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.compile(resp);
  }         
});

下面是它的一个懒惰的例子是在应用程序准备做的：

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

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

说实话$ P $事先pcompiling模板（服务器端）更高性能的最终用户。

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

precompiling取原始车把和构建你的意见时，把它变成了过多的JavaScript语句中使用。

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

在DOM就绪灰烬扫描的DOM类型的脚本元素文/ X-把手，并呼吁汇编的内容。然后，将结果与从数据模板的名称属性的名称 Ember.TEMPLATES 对象。这可以添加一些完全不必要的负荷时间给应用程序。

When the DOM is ready Ember scans the DOM for script elements of type "text/x-handlebars" and calls compile 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 completely unnecessary load time to the application.

例如，当我们发送的我是一只牛{{登录该}}它被转换成以下JavaScript方法

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.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;
}

最小化，以丑陋的东西像这样的：

minimized to something ugly like this:

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}

根据您的后端是你可以编译和前手捆绑你的模板，并将其发送倒在HTML这样就可以避免浪费时间编译模板客户端。

Depending on what your back-end is you can compile and bundle your templates before hand and send them down in the html so you can avoid spending time compiling the templates client side.

这篇关于Ember.js与外部把手模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！