文档章节

Ember.js 入门指南——handlebars基础

ubuntuvim
 ubuntuvim
发布于 2015/09/12 04:36
字数 1606
阅读 744
收藏 3

Ember采用handlebars模板库作为应用程序的view层。Handlebars模板与普通的HTML非常相似。但是相比普通的HTML而言handlebars提供了非常丰富的Ember表达式。

       Ember采用handlebars模板并且扩展了很多功能,让你使用handlebars就像使用HTML一样简单。你设置可以指定某个模板显示你的应用程序界面,并且还不需要编写更新界面显示值的代码,Ember会自动为你更新。

       在介绍模板之前先介绍一个非常有用、强大的工具 Ember CLI,使用这个工具可以自动生成Ember的代码,甚至可以帮你构建一个新的Ember项目,为你省去很多重复的劳动。有关它的详细介绍请看官网,上面有非常详细的教程,或者你可以使用命令:ember –help 查看它的帮助文档,所涉及的插件请自行安装,如有不明白的可以联系我。下面我将使用这个工具新建一个Ember项目,并运行它。

1Ember CLI 工具

新建项目命令:

ember new chapter2_tempalte

进入项目目录并启动服务器:

cd chapter2_template

ember server

运行项目,浏览器打开这个链接:http://localhost:4200/

如果你能看到如下信息说明安装成功了。

blob.png

如果项目创建成功你可以继续往下看,如果创建不成功请重试,因为后面的代码都基于这个项目来演示的!!!对于生成的每个文件和目录请你看官网文档,上面会有非常详细的说明。为了方便懒人在此就简单介绍其中几个很重要的目录:

目录

说明

app

项目的主要代码都是放在这个目录下

app/controllers

存放CMVC)层(controller)的代码文件

app/helpers

存放自定义的helper代码文件

app/models

存放MMVC)层(model)代码文件

app/routes

存放项目路由设置代码文件

app/templates

存放项目模板代码文件

bower_components

第三方插件库

tests

单元测试文件

vendor

不是使用npmbower安装的第三方插件库

ember-cli-build.js

设置构建规范

dist

存放项目静态资源

       上述这些文件或者目录是后面开发过程经常会用到,只要你是使用ember new appName命令生成的项目都会包括上述这些目录或者文件。其中最重要的就是app目录下的文件、目录了,从app里面的目录结果你就可以很清楚的看到这是个MVC框架的项目。Ember之所以能找到controller对应的template也是根据目录和文件的名称找到的,Ember是有自己的一套命名规则的,详情请看官方文档


2,模板定义

<!-- app/templates/application.hbs -->
<h1>Kittens</h1>
<p>
Kittens are the cutest!!
</p>


注意:代码中的第一句注释的内容表明了这个文件的位置已经文件名称,后面的代码片段也会采用这种方式标注。如果没有特别的说明第一句代码都是注释文件的路径及其名称。

上述就是一个模板,非常简单的模板,只有一个h1p标签,当你保存这个文件的时候Ember CLI会自动帮你刷新页面,不需要你手动去刷新!此时你的浏览器页面应该会看到如下信息:

blob.png

那么恭喜你,模板定义成功了,至于为什么执行localhost:4200就直接显示到这里等你慢慢学到controllerroute的时候自然会明白,你就当application.hbs是一个默认的首页,这样你应该明白了吧!

 

3handlbars表达式

       每一个模板都会有一个与之关联的controller类。这就是模板能显示表达式的值的原因,你可以在controller类中设置模板中表达式显示的值,就像java web开发中在servlet或者Action调用request.setAttribute()方法设置某个属性一样。比如下面的模板代码:

<!-- app/templates/application.hbs -->
 
<!-- 这个是默认的模板,Ember会根据命名的规则自动找到 controllers/application 对应的模板是templates/application.hbs -->
 
<h2 id="title">Welcome to Ember</h2>
 
<!-- Ember的属性自动更新:如果属性在controller层改变了,页面会自动刷新显示最新的值,太强大了!!! -->
 
Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

下面我们创建一个controller。这次我们用Ember CLI的命令创建: ember generate controller application,这句命令表示会创建一个controller并且名称是application,然后我们会得到如下几个文件:

  1. app/controllers/application.js   --controller本身

  2. tests/unit/controllers/application-test.js   --controller对应的单元测试文件

打开你的文件目录,是不是可以在app/controllers下面看到了!

现在为了演示表达式我们在controller里添加一些代码:

// app/controllers/application.js
 
import Ember from 'ember';
 
/**
 * Ember会根据命名规则自动找到templates/application.hbs这个模板,
 * @type {hash} 需要设置的hash对象
 */
export default Ember.Controller.extend({
       //  设置两个属性
       firstName: 'chen',
       lastName: 'ubuntuvim',
       email: 'chendequanroob@gmail.com'
});

然后修改显示的模板如下:

<!-- app/templates/application.hbs -->
 
<!-- 这个是默认的模板,Ember会根据命名的规则自动找到 controllers/application 对应的模板是templates/application.hbs -->
 
<h2 id="title">Welcome to Ember</h2>
 
 
<!-- Ember的属性自动更新:如果属性在controller层改变了,页面会自动刷新显示最新的值,太强大了!!! -->
 
Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

   保存,然后页面会自动刷新,我们可以看到在controller设置的值,可以直接在模板上显示了。

blob.png

    这个就是表达式的绑定,后面你会学习到更多更有趣也更复杂的handlebasr表达式,HTML文档的内容会根据这下表达式的改变而改变。

    随着应用程序的规模不断扩大,会有更多的模板和与之关联的控制器。并且有时候一个模板还可以对应这多个控制器。也就是说模板上表达式的值可能有多个controller控制。



© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,...

ubuntuvim
2015/09/07
390
2
Ember.js 入门指南——handlebars遍历标签

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 采用与上一篇文章一样的方法,使用 ember generate route handlebars-each 命令创建了一个路由文件和一个对应...

ubuntuvim
2015/09/16
540
0
Ember.js 入门指南——model的关联关系处理

在前面《Ember.js 入门指南-模型定义》中介绍过模型之前的关系。主要包括一对一、一对多、多对多关系。但是还没介绍两个有关联关系model的更新、删除等操作。 为了测试新建两个model。 embe...

ubuntuvim
2015/10/21
345
0
Ember.js 入门指南——handlebars条件表达式

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 handlebars模板提供了与一般语言类似的条件表达式,比如if、if……else……。 在介绍这些条件表达式之前,我...

ubuntuvim
2015/09/13
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

32位与64位Linux系统下各类型长度对比

64 位的优点:64 位的应用程序可以直接访问 4EB 的内存和文件大小最大达到4 EB(2 的 63 次幂);可以访问大型数据库。本文介绍的是64位下C语言开发程序注意事项。 1. 32 位和 64 位C数据类型...

mskk
9分钟前
2
0
Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)

在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。 针对此需求,整理了三种实现方式,大家按实际情况选择。 当然,我们做项目肯定会用到 UI 框架,常...

张兴华ZHero
16分钟前
2
0
SpringBoot激活profiles你知道几种方式?

多环境是最常见的配置隔离方式之一,可以根据不同的运行环境提供不同的配置信息来应对不同的业务场景,在SpringBoot内支持了多种配置隔离的方式,可以激活单个或者多个配置文件。 激活Profi...

恒宇少年
17分钟前
3
0
PDF修改文字的方法有哪些?怎么修改PDF文件中的文字

PDF修改文字一直以来都是一个难以解决的问题,很多的办公族在办公的时候会有修改PDF文件中的文字的需要,可是PDF文件一般是不能进行编辑和修改的,难道就没有什么办法解决这个问题了嘛?不要...

趣味办公社
20分钟前
2
0
企业组织中采用服务网格的挑战

作者:Christian Posta 译者:罗广明 原文:https://blog.christianposta.com/challenges-of-adopting-service-mesh-in-enterprise-organizations/ 编者按 本文作者介绍了企业组织采用服务网...

jimmysong
30分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部