6.1 Controllers -- Introduction
一、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的更多相关文章
- 【转】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 ...
- 如何学习ios(摘自知乎https://www.zhihu.com/question/20016551)
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Wang Hailong链接:https://www.zhihu.com/question/20016551/answer/1 ...
- 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 ...
- [AngularJS 1] Introduction to AngularJS
introduction:this article is going to introduce AngularJS in generally. I will write it through five ...
- ASP.NET Core 源码学习之 Logging[1]:Introduction
在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...
- 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 ...
- 【ASP.NET Core 】ASP.NET Core 源码学习之 Logging[1]:Introduction
在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...
- 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 ...
- [译] QUIC Wire Layout Specification - Introduction & Overview | QUIC协议标准中文翻译(1) 简介和概述
本文同步发布于: https://www.pengrl.com/p/33330/ ,转载请注明出处,谢谢. 目录 Introduction | 简介 Conventions and Definitio ...
随机推荐
- 南京IT企业环境之最深心得体会
我是南京做嵌入式的. 之前搞过一年的PC平台Linux内核开发,Linux内核态的仅仅要不是非常复杂的BUG还是能修复的.一年的Linux用户态软件开发. 然后近期搞了两年ARM嵌入式开发. 做的CM ...
- 超全面的JavaWeb笔记day07<Java基础加强>
1.myeclipse安装和使用(**) 2.debug调试模式(**) - F6: 单步执行 - F8:结束断点,后面有断点到下一个断点 3.myeclipse快捷键(**) 4.junit单元测试 ...
- Java精选笔记_XML基础
XML基础 XML概述 W3C组织简介 W3C是World Wide Web Consortium(万维网联盟)的缩写,它是对网络标准定制的一个非赢利组织,如HTML.XHTML.CSS.XML的标准 ...
- Effective C++ Item 34 Differentiate between inheritance of interface and inheritance of implementation
1. 成员函数的接口总是被继承. 如 Item32 所说, public 意味着 is-a, 所以对 base class 为真的任何事情对 derived class 也为真 2. 声明一个 pur ...
- Android 4.0 Tabhost图标显示不出来
安卓4.0会有这个问题,修改Manifest.xml里面的Theme,找到System Resources,里面有Theme.black,选这个就行了.剩下自己要改背景色什么的这个还是比较easy的吧 ...
- python 数据类型详解(转)
转自:http://www.cnblogs.com/linjiqin/p/3608541.html 目录1.字符串2.布尔类型3.整数4.浮点数5.数字6.列表7.元组8.字典9.日期 1.字符串1. ...
- 监控之_nrpe
监控机上安装nagios插件和nrpe(nrpe添加为xinetd服务) 1.添加nagios用户 /usr/sbin/useradd nagios passwd nagios 2.安装nagio ...
- java日志之slf4j与logback简单使用
最近在开发遇到日志是使用slf4j与logback.xml的配置,所以就记录下来了. 1.导入这几个jar包: Logback 分为三个模块:logback-core,logback-classic, ...
- Java创建数组的三种方法
■ 第一种: int[] arr=new int[6]; arr[0] = 1; arr[1] = 2 arr[2] = 3; arr[3] = 4; arr[4] = 5; arr[5] = 6; ...
- select 相关 获取当前项以及option js选定
$("#product option[value='170']").prop("selected","true")//要确定是selecte ...