Ember.js带有外部句柄模板 [英] Ember.js with external handlebars template

问题描述

所以，我是一个新的 Ember.js ，这是几个小时，因为我被困住了。我正在玩这个博客客户端，我想完成的是加载这些 handlebars 来自外部文件的模板。

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.

当用户单击面板中的关于页面时，应显示关于模板。
这里的代码很简单，所以你不必那么挖掘（我认为这对于有经验的用户来说很简单）

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)

$ c> html 如示例所示

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>

现在我做了是将 x-handlebar 代码从 html 页面中放下（不含< script type ...> ），然后将其放在 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),
      });
    }         
  });

ajax的结果保存了.hbs页面的内容，那么我必须编译它 Ember 可以渲染它，对吧？认为这是我做的但这是我来的那么远。我做的是对吗？下一步是什么？我相信我必须将ajax调用的内容追加到 body 等。

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.

提前感谢，通过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

诚实地预先编译模板（服务器端）对于最终用户来说更为有效。

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

预编译采用原始句柄，并将其转换成大量的JavaScript语句，以供您构建视图时使用。

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

当DOM准备就绪时，Ember将扫描DOM类型为text / x-handlebars的脚本元素，并调用其内容的编译。然后将结果添加到具有来自data-template-name属性的名称的 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.

例如，当我们发送我是一头牛{{log this}}时，它被转换成以下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;
}

最小化为这样的丑陋：

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屋！