极客教程Ember 如何创建Handlebars模板
Ember 使用 handlebars模板库 来修改应用程序的用户界面。Handlebars与HTML代码类似，但为开发人员提供了额外的功能，如添加可以改变显示页面的表达式。我们可以使用handlebars的其他功能来清楚地了解Ember的handlebars。一旦告诉Ember渲染你创建的模板，就不需要编写额外的代码，因为handlebars可以轻松处理这个事情。
步骤：
定义模板： 如果你不使用构建工具，你可以简单地使用script标签在HTML中定义应用程序的模板。
- 然后，当加载时，模板会被编译并成为你的应用程序模板。
HTML
<html>
<body>
<script type="text/x-handlebars">
Hello, <strong>{{first_Name}} {{last_Name}}</strong>!
</script>
</body>
</html>
- 我们可以根据名称定义模板，并在以后需要时使用。当我们希望在不同的地方多次使用相同的代码而不是编写该代码时，这个功能非常有用，我们只需通过其名称创建模板，并在需要时使用它。我们使用 data-template-name 属性为模板命名。
HTML
<html>
<head>
<script type="text/x-handlebars" data-template-name="tempName">
<div class="my-class1">{{first_Name}}</div>
</script>
</head>
</html>
模板引擎语法:
- 每个模板都有自己的控制器，可以通过 查找属性名称 来显示任何内容。
- 我们可以通过将属性名称用括号括起来来从控制器中打印属性。它将查找first_Name和last_Name属性，并将它们放入HTML DOM并显示出来。
Hii, <strong>{{first_Name}} {{last_Name}}</strong>!!!
- 默认情况下，我们的应用程序模板绑定到我们的ApplicationController，如下所示：
App.ApplicationController = Ember.Controller.extend({
first_Name: "Dreke",
last_Name: "Pirnick"
});
- 上述的控制器和模板将以以下HTML格式显示： 显示HTML内容如下：
Hii, <strong>Dreke Pirnick</strong>!!!
- 当我们的应用程序变得庞大时，我们将拥有更多的模板，并且每个模板将与不同的控制器绑定。
- 当模板的值发生变化时，HTML内容会自动更新。