文档章节

Ember.js 入门指南——控制器(controller)

ubuntuvim
 ubuntuvim
发布于 2015/10/15 00:34
字数 1282
阅读 332
收藏 1
ember new chapter5_controllers
cd chapter5_controllers
ember server

从本篇开始进入第五章控制器,controllerEmber2.0开始越来越精简了,职责也更加单一——处理逻辑。

下面是准备工作。

从新创建一个Ember项目,仍旧使用的是Ember CLI命令创建。


在浏览器执行项目,看到如下信息说明项目搭建成功。

Welcome to Ember

1,控制器简介

       控制器与组件非常相似,由此,在未来的新版本中很有可能组件将会完全取代控制器,很可能随着Ember版本的更新控制器将退出Ember。目前的版本中组件还不能直接通过路由访问,需要通过模板调用才能使用组件,但是未来的版本会解决这个问题,到时候controller可能就真的从Ember退出了!

       正因如此,模块化的Ember应用很少用到controller。即便是使用了controller也是为了处理下面的两件事情:

  1. controller主要是为了维持当前路由状态。一般来说,model的属性会保存到服务器,但是controller的属性却不会保存到服务器。

  2. 组件上的动作需要通过controller层转到route层。

模板上下文的渲染是通过当前controller的路由处理的。Ember所追随的理念是约定优于配置,这也就意味着如果你只需要一个controller 你就创建一个,而不是一切为了便于工作

 

下面的例子是演示路由显示blog post。假设模板blog-post用于展示模型blog-post的数据,并在这个模型包含如下属性(隐含属性id,因为在model中不需要手动指定id属性):

  • title

  • intro

  • body

  • author

model定义如下:

//  app/models/blog-post.js
 
import DS from 'ember-data';
 
export default DS.Model.extend({
  title: DS.attr('string'),  //  属性默认为string类型,可以不指定
  intro: DS.attr('string'),
  body: DS.attr('string'),
  author: DS.attr('string')
});

 

route层增加测试数据,直接返回一个model对象。

//  app/routes/blog-post.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              var blogPost = this.store.createRecord('blog-post', {
                     title: 'DEFINING A COMPONENT',  //  属性默认为string类型,可以不指定
                     intro: "Components must have at least one dash in their name. ",
                     body: "Components must have at least one dash in their name. So blog-post is an acceptable name, and so is audio-player-controls, but post is not. This prevents clashes with current or future HTML element names, aligns Ember components with the W3C Custom Elements spec, and ensures Ember detects the components automatically.",
                     author: 'ubuntuvim'
              });
              // 直接返回一个model,或者你可以返回promises,
              return blogPost;
       }
});

 

显示信息的模板如下:

<!--  app/templates/blog-post.hbs  -->
 
<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
 
<div>
       {{model.intro}}
</div>
 
<hr>
 
<div>
       {{model.body}}
</div>

如果你的代码没有编写错误那么也会得到如下结果:

“Welcome to Ember”是主模板的信息,你可以在application.hbs中删除,但是记得不要删除{{outlet}},否则什么信息也不显示。

 

       这个例子中没有显示任何特定的属性或者指定的动作(action)。此时,控制器的model属性所扮演的角色仅仅是模型属性的“pass-through”(或代理)。

注意:控制器获取的model是从route得到的。

 

       下面为这个例子增加一个功能:用户可以点击标题触发显示或者隐藏post的内容。通过一个属性isExpanded控制,下面分别修改模板和控制器的代码。

//  app/controllers/blog-post.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       isExpanded: false,  //默认不显示body
       actions: {
              toggleBody: function() {
                     this.toggleProperty('isExpanded');
              }
       }
});

       controller中增加一个属性isExpanded,如果你不在controller中定义这个属性也是可以的。对于这个controller代码的解释请看《Ember.js 指南——{{action}} 助手》。

<!--  app/templates/blog-post.hbs  -->
 
<h1>{{model.title}}</h1>
<h2>{{model.author}}</h2>
 
<div>
       {{model.intro}}
</div>
 
<hr>
{{#if isExpanded}}
       <button {{action 'toggleBody'}}>hide body</button>
       <div>
              {{model.body}}
       </div>
{{else}}
       <button {{action 'toggleBody'}}>Show body</button>
{{/if}}

       在模板中使用if助手判断isExpanded的值,如果为true则显示body,否则不显示。 

页面加载之后结果如下,首先是不显示body内容,点击按钮“Show body”则显示内容,并且按钮变为“hide body”。然后在点击这个按钮则不显示body内容。

 

       到此controller的职责你应该大致了解了,其主要的作用是逻辑的判断、处理,比如这里例子中判断body内容的显示与否,其实你也可以把controller类中的处理代码放在route类中也可以实现这个效果,但是要作为model的属性返回(把isExpanded当做model的属性处理),请读者自己动手试试,但是把逻辑放到route又会使得route变得不专一了,route的主要职责是初始化数据的。我想这也是Ember还留着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
389
2
Ember.js 入门指南——管理controller之间的依赖关系

在有路由嵌套的情况下,你可能需要在两个不同的controller之间通信。 按照惯例先做准备工作: ember g route postember g route post/commentsember g model post 比如下面的路由设置: // r...

ubuntuvim
2015/10/15
426
0
从服务器获取数据,引入组件

博文原址:http://blog.ddlisting.com/2016/04/21/yin-ru-zu-jian/ 接着前面四篇: 环境搭建以及使用Ember.js创建第一个静态页面 引入计算属性、action、动态内容 模型,保存数据到数据库 发...

ubuntuvim
2016/04/26
75
0
Ember.js 入门指南——handlebars基础

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

ubuntuvim
2015/09/12
744
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部