JSRUN 用代码说话

基础

编辑教程

基础

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

Ember采用handlebars模板并且扩展了很多功能,让你使用handlebars就像使用HTML一样简单。

模板定义

前篇介绍了一个很重要的构建工具Ember CLI,从本篇开始后面所创建的文件都是使用这个构建工具来创建,先进入到项目路径下再执行Ember CLI命令。

创建一个模板命令ember g template application

由于这个模板在创建项目的时候就已经有了,所以会提示是否覆盖原来的文件,可以选择覆盖或不覆盖。


<h1>Kittens</h1>
<p>
Kittens are the cutest!!
</p>

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

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

模板定义成功

handlbars表达式

每一个模板都会有一个与之关联的controller类、route类、model类(当然这些类是不是必须有的)。

这就是模板能显示表达式的值的原因,可以在controller类中设置模板中表达式显示的值, 就像java web开发中在servlet或者Action调用request.setAttribute()方法设置某个属性一样。

比如下面的模板代码:


<h2 id="title">Welcome to Ember</h2>

Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

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

  • app/controllers/application.js --controller本身
  • 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'
});

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


<h2 id="title">Welcome to Ember</h2>

Hello, <strong>{{firstName}} {{lastName}}</strong>!
<br>
My email is <b>{{email}}</b>

保存,然后页面会自动刷新(Ember CLI会自动检测文件是否改变,然后重新编译项目),在controller设置的值可以直接在模板上显示了。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟