📜  如何创建 ember 车把模板?

📅  最后修改于: 2022-05-13 01:56:37.438000             🧑  作者: Mango

如何创建 ember 车把模板?

余烬 使用车把模板库来修改应用程序的用户界面。 Handlebars 就像 HTML 代码一样,但它们为开发人员提供了额外的功能,例如添加可以更改显示页面的表达式。我们可以利用车把的其他特性来对 ember 车把有一个清晰的认识。一旦您告诉 ember 渲染您创建的模板,则无需编写额外的代码,因为把手可以轻松处理该事情。

脚步:

定义模板:如果您不使用构建工具,那么您可以使用脚本标签在 HTML 中简单地定义应用程序的模板。

  • 然后该模板被编译并在加载时成为您的应用程序模板。
HTML


    



HTML


    



  • 我们可以通过名称来定义模板,如果需要,可以在以后使用。当我们想要在不同的地方一次又一次地使用相同的代码而不是编写该代码时,这个东西很有帮助,我们可以简单地通过其名称创建一个模板并在需要时使用它。我们使用data-template-name属性为模板命名。

HTML



    


HandleBars 表达式:

  • 每个模板都有自己的控制器,可以通过查找属性名称来显示任何内容。
  • 我们可以通过将属性名称包裹在大括号中来从控制器打印属性。它将查找 first_Name 和 last_Name 属性,然后将它们放入 HTML DOM 并显示它们。
Hii, {{first_Name}} {{last_Name}}!!!
  • 默认情况下,我们的应用程序模板绑定到我们的 ApplicationController,如下所示:
App.ApplicationController = Ember.Controller.extend({
  first_Name: "Dreke",
  last_Name: "Pirnick"
});
  • 上面的控制器和模板将显示如下所示的 HTML 内容
Hii, Dreke Pirnick!!!
  • 当我们的应用程序变大时,我们将拥有更多模板,并且每个模板都将绑定到不同的控制器。
  • 当模板值发生变化时,HTML 内容将自动更新。