EmberJS - Handlebars 基础知识

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

语法

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

示例

以下示例显示如何显示应用程序控制器中的属性。使用以下代码在 app/templates/ 下创建一个名为 application.hbs 的模板 −

//显示 firstSentence 和 lastSentence 的值
Hello, <strong>{{firstSentence}} {{lastSentence}}</strong>!

现在创建具有相同名称的控制器(模板文件)以添加属性。使用以下代码将在 app/controller/ 下创建 application.js 文件−

import Ember from 'ember';

export default Ember.Controller.extend ({
   //初始化值
   firstSentence: 'Welcome to',
   lastSentence: 'TutorialsPoint!'
});

输出

运行 ember 服务器,您将收到以下输出 −

Ember.js Template Handlebars Basics

我们将在编写帮助程序一章中看到帮助程序的详细概念。

emberjs_template.html