如何通过浏览器呈现手柄模板

时间:2016-03-16 13:56:26

标签: ember.js handlebars.js

我想知道ember框架的低级实现。当脚本标签内定义的车把模板类型=" text / x-handlebars-template"被附加到DOM?另外,浏览器如何排除该脚本?(即如何修改页面的实际流程。我是新手的ember和把手,只是好奇地知道这一点。

2 个答案:

答案 0 :(得分:0)

对于最后一个问题:

在浏览器中永远不会看到脚本,因此无需将其从渲染中排除。 WebComponent模板现在是这种脚本模板的替代品,但如果您使用的是旧模板,它们仍会显示,因此如果您希望模板与所有浏览器兼容,脚本标签现在是更好的解决方案。因此页面的呈现不受影响。在页面加载结束时,您将运行计算模板渲染的手柄脚本,一旦完成,将把它插入dom(通常替换占位符)。

关于你的第一个问题:

问题尚不清楚您是否想知道模板如何附加到dom或何时附加或如何呈现?知道这一点的最好方法是查看handlebars.js的来源。我不知道ember.js但是如果你只是使用把手,你必须在dom中手动添加处理结果(例如使用jquery)。

答案 1 :(得分:0)

我只是使用旧版本的Ember进行了几次实验,以了解更多内容,真正发生的事情。 (它与最新的Ember版本完全相关。)您可以在此处阅读我的发现:https://github.com/zoltan-nz/ember-resolver-experiment

在回答您的问题时,Ember将在初始化过程中运行以下功能:https://github.com/emberjs/ember.js/blob/master/packages/ember-htmlbars/lib/system/bootstrap.js#L40

如您所见,有一个bootstrap函数,它使用jQuery在DOM中查找这些特殊的模板脚本。它将使用ember-template-compiler进行编译,并将添加到Ember.TEMPLATES对象中。 (如果您键入Ember.TEMPLATES,则可以登录控制台。)

正如您在此bootstrap函数中看到的那样,这些模板脚本标记将在编译后从DOM中删除(第72行)。

每个版本的Ember软件包都带有不同的ember.js文件(用于生产和调试),你可以找到ember-template-compiler.js,它基本上是把手编译器。在ember项目中你根本不需要handlebar.js,因为这个ember-template-compiler.js是你的handlebar.js。

如果你想了解更多关于Ember.js的信息,我写了一篇从基础知识开始的免费教程:Ember.js tutorial