[英]Ember.js with external handlebars template
So, I'm kind of new to Ember.js
and it's been a couple of hours since I'm stuck with this. 所以,我对
Ember.js
来说是个Ember.js
,自从我坚持这个以来已经有几个小时了。 I'm playing with this bloggr client and what I want to accomplish is to load those handlebars
templates from external files. 我正在玩这个博客客户端 ,我想要完成的是从外部文件加载这些
handlebars
模板。
The "about" template should render when the user clicks the about page in the panel. 当用户单击面板中的about页面时,应该呈现“about”模板。 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 html
如示例中所示
<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
现在我所做的是将
x-handlebar
代码从html
页面移开并放置它(没有<script type...>
)然后将它放在hbs/about.hbs
Now, inside the html page I've done something like this. 现在,在html页面中我做了类似的事情。
$.ajax({
url: 'hbs/about.hbs',
async: false,
success: function (resp) {
App.About = Ember.View.extend({
template: Ember.Handlebars.compile(resp),
});
}
});
The result of the ajax holds the content of the .hbs page, then I have to compile it so Ember
can render it, right? ajax的结果保存.hbs页面的内容,然后我必须编译它,所以
Ember
可以渲染它,对吧? 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. 我相信我必须将ajax调用的内容附加到
body
左右。
Thanks in advance, after searching through SO I still wasn't able to make it run. 提前谢谢,搜索完SO后我仍然无法让它运行。
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 http://emberjs.jsbin.com/apIRef/1/edit
To be honest precompiling the templates beforehand (server side) is more performant for the end user. 老实说,事先预先编译模板(服务器端)对最终用户来说更具性能。
Precompiling takes the raw handlebars and turns it into a plethora of javascript statements for use when building your views. 预编译采用原始把手并将其转换为大量的javascript语句,以便在构建视图时使用。
When the DOM is ready Ember scans the DOM for script elements of type "text/x-handlebars" and calls compile on their contents. 当DOM准备就绪时,Ember会扫描DOM以查找“text / x-handlebars”类型的脚本元素,并对其内容调用compile。 It then adds the results to the
Ember.TEMPLATES
object with the name from the data-template-name attribute. 然后,它将结果添加到
Ember.TEMPLATES
对象,其名称来自data-template-name属性。 This can add some completely 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 例如,当我们发送“我是奶牛{{log this}}”时,它被转换为以下javascript方法
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}
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. 根据您的后端的不同,您可以预先编译和捆绑模板,并将其发送到html中,这样您就可以避免花时间编译模板客户端。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.