6.2 Controllers -- Representing Multipe Models
1. 一个controller的model可以代表几个记录也可以代表单个。这里,路由的model hook返回一个歌曲数组:
app/routes/songs.js
export default Ember.Route.extend({
model() {
return this.store.findAll('song');
}
});
在songs的模板中,我们可以使用{{#each}}辅助器来展示每一首歌曲:
app/templates/songs.hbs
<h1>Playlist</h1> <ul>
{{#each model as |song|}}
<li>{{song.name}} by {{song.artist}}</li>
{{/each}}
</ul>
2. 你可以使用controller去收集model有关的集合信息。例如,想象一下我们希望展示长度超过30秒的歌曲的数量。我们可以为controller添加一个新的计算属性叫做longSongCount。
app/controllers/songs.js
export default Ember.Controller.extend({
longSongCount: Ember.computed('model.@each.duration', function() {
let songs = this.get('model');
let longSongs = songs.filter((song) => {
return song.get('duration') > 30;
});
return longSongs.get('length');
})
});
现在我们可以在模板中使用这个属性:
app/templates/songs.hbs
<ul>
{{#each model as |song|}}
<li>{{song.name}} by {{song.artist}}</li>
{{/each}}
</ul> {{longSongCount}} songs over 30 seconds.
6.2 Controllers -- Representing Multipe Models的更多相关文章
- Ember.js学习教程 -- 目录
写在前面的话: 公司的新项目需要用到Ember.js,版本为v1.13.0.由于网上关于Ember的资料非常少,所以只有硬着头皮看官网的Guides,为了加深印象和方便以后查阅就用自己拙劣的英语水平把 ...
- MVC & Entity Framework(2)- controller、Models单独DLL
继上一篇MVC & Entity Framework(1)- 开发环境之后,已经很久没更新了.接下来记录一下怎么把MVC中的controller单独拆为一个类库,然后在web项目中引用.另外, ...
- 编写自己的PHP MVC框架笔记
1.MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller). ...
- MVC Api 的跨项目路由
现有Momoda.Api项目,由于团队所有人在此项目下开发,导致耦合度太高,现从此接口项目中拆分出多个子项目从而避免对Momda.Api的改动导致“爆炸” MVCApi的跨项目路由和MVC有解决方式有 ...
- Ext JS - 问答
Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...
- webapi 中的本地登录
WebApi 身份验证方式 asp.net WebApi 中有三种身份验证方式 个人用户账户.用户可以在网站注册,也可以使用 google, facebook 等外部服务登录. 工作和学校账户.使用活 ...
- ASP.NET MVC - 探究应用程序文件夹
为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序. 第 2 部分:探究应用程序文件夹. MVC 文件夹 一个典型的 ASP.NET MVC Web 应用程序的文件夹内容如下 ...
- 最为简易的yii 教程(一)
了解目录的框架结构 framework主要有 base 框架核心组件 caching 缓存组件 db 数据库组件 gii ...
- CI框架入门1
CI框架入门: 1.url的特点 2.目录结构/布局 3.MVC分别在哪里,如何依葫芦画瓢 4.安全性 ...
随机推荐
- spring xml properties split with comma for list
在注入spring bean 属性值的时候常常会用到list, 一般使用方式例如以下: <bean id="testBean" class="com.mytest. ...
- linux添加自启服务(程序)
修改 /etc/rc.d/rc.local 文件,加入启动程序的脚本命令就可以了 例如: /usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongo ...
- 说说M451例程讲解之LED
/**************************************************************************//** * @file main.c * @ve ...
- PHP虚拟主机的配置
今天配置了一下虚拟目录,以下是我的配置方法. 1 编辑httpd.conf,查找Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉. 2 编辑htt ...
- 将display设置为inline-block之后产生间隙然后换行问题的解决方法
在我们会用display的时候,inline-block肯定不陌生吧,我今天在做项目的时候,用了inline-block,使a标签可以自定义宽度,但是随之而来的问题就是换行的BUG,如下图 特地加了一 ...
- springAOP实现(含实例)
需要用到的jar包: 1.XML方式实现: package cn.lxc.post; public class Intermediary { public void post(){ System.ou ...
- CALayer的position,anchorPoint属性 与UIView的frame 属性
彻底理解CALayer的position,anchorPoint属性 与UIView的frame 属性 一.position,anchorPoint两者都是CALayer的属性,都是CGPoint点 ...
- ansible的入门级使用
author: headsen chen date: 2018-08-02 11:46:35 1,ansible的安装 yum install epel-release yum -y i ...
- 【BZOJ4452】[Cerc2015]Export Estimate 并查集
[BZOJ4452][Cerc2015]Export Estimate Description 给你一个n个点m条边的无向图,每条边有权值,我们可以选择一个整数lim来生成一个新的图,过程如下: 1 ...
- 【Android】Could not find XXX.apk!的解决方法
昨天在Eclipse中导入一个Android工程后点击运行时出现了Could not find XXX.apk!的错误信息,具体错误提示如下: 到网上搜了好多方法,挨个尝试,最后都没解决但是,重启 ...