Ember.js 如何通过浏览器渲染把手模板

我想知道ember框架的底层实现。当脚本标记中定义的带有type=“text/x-handlebar-template”的把手模板被附加到DOM中时？另外，浏览器如何排除该脚本？（即如何修改页面的实际呈现流程。我对ember和Handlebar不熟悉，只是想知道这一点。

首先了解最后一个问题：

脚本在浏览器中从未出现过，因此无需将其排除在渲染之外。WebComponent模板现在可以替代此类脚本模板，但如果您使用的是较旧的模板，它们仍将显示出来，因此，如果您希望模板与所有浏览器兼容，脚本标记现在是一个更好的解决方案。因此页面的排序不受影响。在页面加载结束时，您将运行handlebar脚本，该脚本将计算模板呈现，完成后将插入dom（通常替换占位符）

关于你的第一个问题：

---

问题还不清楚，您想知道模板是如何附加到dom的，还是何时附加的，或者是如何呈现的？最好的方法是查看handlebar.js的源代码。我不知道ember.js的源代码，但是如果您只是使用handlebar，您必须在dom中手动添加处理结果（例如，通过使用jquery）。

我刚刚使用旧版本的Ember运行了两个实验，以进一步了解引擎盖下到底发生了什么。（它也与最新版本的Ember完全相关。）您可以在自述文件中阅读我的发现：

在回答您的问题时，Ember将在初始化过程中运行以下功能：

如您所见，有一个

bootstrap

函数，它使用jQuery在您的DOM中查找那些特殊的模板脚本。它将使用

ember-template编译器

进行编译，并将其添加到

ember.templates

对象中。（如果键入

ember.templates

，您可以在控制台中进行检查）

正如您在这个

bootstrap

函数中看到的，这些模板脚本标记将在编译后从DOM中删除（第72行）

每个版本的Ember包都有不同的Ember.js文件（用于生产和调试），您可以在那里找到Ember-template-compiler.js，它基本上就是handlebar编译器。在Ember项目中，您根本不需要handlebar.js，因为这个Ember-template-compiler.js就是您的handlebar.js

---

如果你想了解更多关于Ember.js的信息，我写了一篇免费教程，从最基本的内容开始：

谢谢@christophe Thiry。我的第一个问题是，当模板被编译并且生成的元素被附加到Ember应用程序中的DOM中时？无论是在文档加载事件中还是其他一些事情中？我不能告诉你Ember我不知道使用它，我可以告诉你关于Handlebar.js的事。对不起。我有一天会尝试使用ember，但不会很快。非常感谢@zoltan