一、Controllers

1. 在Ember.js中,controllers允许你使用展现逻辑装饰你的models。通常,models将会有保存到服务器的属性,然而controllers将会有不需要保存到服务器的属性。

2. 例如,如果你正在创建一个blog,你想有一个BlogPost model展现blog_post模板。

3. 你的BlogPost model可能会有像这样的属性:

  • title
  • intro
  • body
  • author

4. 你的模板将会在blog-post模板中绑定这些属性:

app/templates/blog-post.hbs

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2> <div class='intro'>
{{model.intro}}
</div>
<hr>
<div class='body'>
{{model.body}}
</div>

5. 在这个简单的例子中,我们还没有任何显示特定的属性或者actions。到目前为止,对model属性来说,我们的controller的model属性仅仅扮演一个传递角色。(记住,一个controller从他对应的route handler中获得model)。

6. 我们想添加一个功能,它将允许用户切换body部分的显示。为了实现它,我们将首先修改模板来展示body,仅仅如果一个新的isExpaned属性的值是true

app/templates/blog-post.hbs

<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2> <div class='intro'>
{{model.intro}}
</div>
<hr> {{#if isExpanded}}
<button {{action 'toggleProperty' 'isExpanded'}}>Hide Body</button>
<div class='body'>
{{model.body}}
</div>
{{else}}
<button {{action 'toggleProperty' 'isExpanded'}}>Show Body</button>
{{/if}}

你可能会考虑应该把这个属性放在model中,但是body是否被expanded严格来说是一个显示问题。

把这个属性放在controller中,可以清晰的将相关的显示逻辑和相关的data model逻辑分离。这将使model单元测试更加容易而不用担心显示逻辑爬进你设置的测试。

二、A note on Coupling(关于耦合的说明)

1. 在Ember.js中,模板从controllers中获取它们的属性,这些属性装饰一个model。

2. 这意味着templates了解controllers并且controllers了解models,但是反过来的话则不然。一个model根本不知道哪一个controller正在装饰它,并且一个controller不知道哪一个模板在显示它的属性。

3. 示意图

4. 这也意味着,作为一个template,所有的属性都来自controller,并且它不需要直接了解model。

5. 实际上,Ember.js将会为整个应用程序创建一个模板的controller一次,但是在应用程序的整个生命周期中controller的model可能会改变,不需要模板知道这些操作的任何内容。

6. 例如,如果用户从/posts/1导航到/posts/2,controller的model将会从store.findRecord('post', 1)变为store.findRecord('post', 2)。在model中该模板将会更新它表示的任何属性,以及controller中依赖于model的任何依赖计算属性。

7. 通过使用一个controller对象渲染它,这使得测试一个模板很容易。这个controller对象包含模板需要的属性。从模板的角度来看,一个controller是一个简单的对象,它提供它的数据。

三、Representing Models

通常,通过一个controller或者component为模板提供context,而不是一个model。这使得很容易将指定的展现属性和指定的model属性分离,并且当用户导航页面时切换一个controller的model。

四、Storing Application Properties

1. 注意应用程序中所有的属性需要被存到服务器。任何时候,你需要仅仅为这个应用程序运行的生命周期存储信息,你可以存储它到一个controller中。

2. 例如,假设你的应用程序有一个一直存在的search field。你应该存贮一个search属性到你的ApplicationController,并且在这个application模板中绑定search field到一个属性,像这样:

app/templates/application.hbs

<header>
{{input type="text" value=search action="query"}}
</header> {{outlet}}

app/controllers/application.js

export default Ember.Controller.extend({
// the initial value of the `search` property
search: '', actions: {
query() {
// the current value of the text field
var query = this.get('search');
this.transitionToRoute('search', { query });
}
}
});

application的模板存储它的属性并且发送它的actions到ApplicationController。在这种情况下,当用户点击进入,这个应用程序将会跳转到search路由,传递query作为一个参数。

6.1 Controllers -- Introduction的更多相关文章

  1. 【转】Controllers and Routers in ASP.NET MVC 3

    Controllers and Routers in ASP.NET MVC 3 ambilykk, 3 May 2011 CPOL 4.79 (23 votes) Rate: vote 1vote ...

  2. 如何学习ios(摘自知乎https://www.zhihu.com/question/20016551)

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Wang Hailong链接:https://www.zhihu.com/question/20016551/answer/1 ...

  3. How to Create Mixed Reality Videos for the Vive - with Two Controllers

    http://secondreality.co.uk/blog/how-to-create-mixed-reality-videos-for-the-vive-with-two-controllers ...

  4. [AngularJS 1] Introduction to AngularJS

    introduction:this article is going to introduce AngularJS in generally. I will write it through five ...

  5. ASP.NET Core 源码学习之 Logging[1]:Introduction

    在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...

  6. DC-DC Controllers Use Average-Current-Mode Control for Infotainment Applications-3939

    DC-DC Controllers Use Average-Current-Mode Control for Infotainment Applications Abstract: Auto info ...

  7. 【ASP.NET Core 】ASP.NET Core 源码学习之 Logging[1]:Introduction

    在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...

  8. Introduction To The Smart Client Software Factory (CAB/SCSF Part 18)

    1. Shell This is the start-up project for the solution. It is very similar to the start-up projects ...

  9. [译] QUIC Wire Layout Specification - Introduction & Overview | QUIC协议标准中文翻译(1) 简介和概述

    本文同步发布于: https://www.pengrl.com/p/33330/ ,转载请注明出处,谢谢. 目录 Introduction | 简介 Conventions and Definitio ...

随机推荐

  1. Spring------SpringBoot中注解

    转载: http://www.tuicool.com/articles/bQnMra

  2. 使用Unity制作的一个望远镜特效,在狙击手游戏中非经常见

    仅仅须要编写一个脚本文件,然后就能随意设置放大缩小的速度.以及程度.

  3. 使用Git Hooks实现开发部署任务自动化

    前言 版本控制,这是现代软件开发的核心需求之一.有了它,软件项目可以安全的跟踪代码变更并执行回溯.完整性检查.协同开发等多种操作.在各种版本控制软件中,git是近年来最流行的软件之一,它的去中心化架构 ...

  4. MySQL性能优化(一)-- 存储引擎和三范式

    一.MySQL存储引擎 存储引擎说白了就是如何存储数据.如何为存储的数据建立索引和如何更新.查询数据等技术的实现方法.因为在关系数据库中数据的存储是以表的形式存储的,所以存储引擎也可以称为表类型(即存 ...

  5. Python 使用正则表达式匹配URL网址

    使用正则表达式匹配以 .com 或 .cn 为域名后缀的URL地址 In [1]: import re In [2]: str = "http://www.baidu.com/" ...

  6. Triton调试记录

    先编译Release版本 先从下拉列表选择Release-MT-DLL,然后选中Triton-vc14工程, 修改项目属性配置为Release-MT-DLL-NODX,NODX的意思是不使用Direc ...

  7. 使用HTML5 的跨域通信机制进行数据同步

    离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...

  8. thinkjs——两表联查

    问题来源: 现有一张texture以及一张tradename表,两者的联系是texture表中有一字段名为tid对应tradename表中的id,而tradename表中却有一字段type,要求根据t ...

  9. 如何使用微信小程序制作banner轮播图?

    在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...

  10. zookeeper-端口说明

    一.zookeeper有三个端口(可以修改) 1.2181 2.3888 3.2888 二.3个端口的作用 1.2181:对cline端提供服务 2.3888:选举leader使用 3.2888:集群 ...