把手基础知识（Handlebars Basics）

优质

小牛编辑

133浏览

2023-12-01

Handlebars模板库允许通过包含静态HTML和动态内容来构建丰富的用户界面，这些内容可以在双花括号中指定 - {{}}。

语法 (Syntax)

Ember.Controller.extend ({
   property1: value,
   property2: value,
   .....
   propertyn: valuen,
});

例子 (Example)

以下示例显示如何从应用程序控制器显示属性。使用以下代码在app/templates/下创建名为application.hbs app/templates/ -

//displaying the values of firstSentence and lastSentence
Hello, <strong>{{firstSentence}} {{lastSentence}}</strong>!

现在创建具有相同名称（模板文件）的控制器以添加属性。 application.js文件将在app/controller/下创建，代码如下 -

import Ember from 'ember';
export default Ember.Controller.extend ({
   //initializing values
   firstSentence: 'Welcome to',
   lastSentence: 'xnip!'
});

输出 (Output)

运行ember服务器，您将收到以下输出 -

我们将在Writing Helpers章节中看到Helpers的细节概念。