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