浏览器如何呈现车把模板

how handlebar templates are rendered by the browser

我想了解 ember 框架的底层实现。当在 type="text/x-handlebars-template" 的脚本标签内定义的车把模板附加到 DOM?此外,浏览器如何排除该脚本?(即如何修改页面呈现的实际流程。我是 ember 和 handlebars 的新手,只是想知道这一点。

最后一个问题先:

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

第一个问题:

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

我只是 运行 对 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