文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

模板 - Handlebars基础

发布于 2020-02-21 15:48:02 字数 2570 浏览 1086 评论 0 收藏 0

英文原文：http://emberjs.com/guides/templates/handlebars-basics/

Ember.js 使用 Handlebars模板库来增强你的应用程序的用户界面。Handlebars模板与普通的HTML类似，但是它还提供了嵌入表达式来改变显示内容的功能。

我们采用了Handlebars，并且还使用许多强大的功能对其进行了扩展。为了有助于理解，你可以认为Handlebars模板是一种用于描述你的应用程序界面的类HTML的DSL。而且，一旦使用Ember.js在屏幕上渲染一个模板，开发人员就不需要编写额外的代码来确保其更新。

在熟悉了Handlebars之后，如果相对Handlebars语法而言，你更加习惯基于缩进的写法，那么可以试试使用Emblem.js。

定义模板

如果你没有在使用构建工具,你仍然可以在HTML文档中定义应用程序的主模板，只需要在HTML中加上<script>标签,如下所示：

<html>
  <body>
    <script type="text/x-handlebars">
      Hello, <strong>{{firstName}} {{lastName}}</strong>!
    </script>
  </body>
</html>

这个模板将会被自动编译成为你的应用程序的主模板,它将在应用程序加载时通过路由显示在页面上。

你也可以为模板定义一个名称，以便复用。例如，你可能想定义一个在多个不同的应用程序用户界面处都可以使用的可重用控件。如果只是希望Ember.js先保存模板留做复用，而不是即时显示，那么可以使用data-template-name属性：

<html>
  <head>
    <script type="text/x-handlebars" data-template-name="say-hello">
      <div class="my-cool-control">{{name}}</div>
    </script>
  </head>
</html>

如果你正在使用构建工具管理应用程序，那么大多数工具可以对Handlebars模板进行预编译并使它们可以用于Ember.js

Handlerbars表达式

每一个模板都有其相关的控制器：模板从中获取要显示的属性。

使用花括号将属性名称括起来，就可以显示控制器中所定义的属性,如下所示：

1	Hello, <strong>{{firstName}} {{lastName}}</strong>!

上面的语句将会到控制器中查询firstName和lastName属性值,插入到模板所描述的HTML文档中,然后放到DOM中去。

默认情况下，最上层的应用程序模板与ApplicationController关联，即：

App.ApplicationController = Ember.Controller.extend({
  firstName: "Trek",
  lastName: "Glowacki"
});

上面的模板和控制器将协作呈现出被渲染的HTML,如下所示：

1	Hello, <strong>Trek Glowacki</strong>!

这些表达式 (以及接下来你将了解的其他Handlerbars功能) 都有绑定机制。这意味着HTML文档将随着模板使用的属性值的改变而自动更新。

随着一个应用程序规模的扩大，将会存在许多的模板，它们将与不同的控制器关联。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

模板 - Handlebars基础

定义模板

Handlerbars表达式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。