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的更多相关文章

  1. Ember.js学习教程 -- 目录

    写在前面的话: 公司的新项目需要用到Ember.js,版本为v1.13.0.由于网上关于Ember的资料非常少,所以只有硬着头皮看官网的Guides,为了加深印象和方便以后查阅就用自己拙劣的英语水平把 ...

  2. MVC & Entity Framework(2)- controller、Models单独DLL

    继上一篇MVC & Entity Framework(1)- 开发环境之后,已经很久没更新了.接下来记录一下怎么把MVC中的controller单独拆为一个类库,然后在web项目中引用.另外, ...

  3. 编写自己的PHP MVC框架笔记

    1.MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller). ...

  4. MVC Api 的跨项目路由

    现有Momoda.Api项目,由于团队所有人在此项目下开发,导致耦合度太高,现从此接口项目中拆分出多个子项目从而避免对Momda.Api的改动导致“爆炸” MVCApi的跨项目路由和MVC有解决方式有 ...

  5. Ext JS - 问答

    Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...

  6. webapi 中的本地登录

    WebApi 身份验证方式 asp.net WebApi 中有三种身份验证方式 个人用户账户.用户可以在网站注册,也可以使用 google, facebook 等外部服务登录. 工作和学校账户.使用活 ...

  7. ASP.NET MVC - 探究应用程序文件夹

    为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序. 第 2 部分:探究应用程序文件夹. MVC 文件夹 一个典型的 ASP.NET MVC Web 应用程序的文件夹内容如下 ...

  8. 最为简易的yii 教程(一)

    了解目录的框架结构 framework主要有 base          框架核心组件 caching        缓存组件 db                数据库组件 gii          ...

  9. CI框架入门1

    CI框架入门: 1.url的特点             2.目录结构/布局             3.MVC分别在哪里,如何依葫芦画瓢             4.安全性             ...

随机推荐

  1. spring xml properties split with comma for list

    在注入spring bean 属性值的时候常常会用到list, 一般使用方式例如以下: <bean id="testBean" class="com.mytest. ...

  2. linux添加自启服务(程序)

    修改 /etc/rc.d/rc.local 文件,加入启动程序的脚本命令就可以了 例如: /usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongo ...

  3. 说说M451例程讲解之LED

    /**************************************************************************//** * @file main.c * @ve ...

  4. PHP虚拟主机的配置

    今天配置了一下虚拟目录,以下是我的配置方法. 1  编辑httpd.conf,查找Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉. 2  编辑htt ...

  5. 将display设置为inline-block之后产生间隙然后换行问题的解决方法

    在我们会用display的时候,inline-block肯定不陌生吧,我今天在做项目的时候,用了inline-block,使a标签可以自定义宽度,但是随之而来的问题就是换行的BUG,如下图 特地加了一 ...

  6. springAOP实现(含实例)

    需要用到的jar包: 1.XML方式实现: package cn.lxc.post; public class Intermediary { public void post(){ System.ou ...

  7. CALayer的position,anchorPoint属性 与UIView的frame 属性

    彻底理解CALayer的position,anchorPoint属性 与UIView的frame 属性 一.position,anchorPoint两者都是CALayer的属性,都是CGPoint点 ...

  8. ansible的入门级使用

      author: headsen  chen   date: 2018-08-02   11:46:35 1,ansible的安装 yum install epel-release yum -y i ...

  9. 【BZOJ4452】[Cerc2015]Export Estimate 并查集

    [BZOJ4452][Cerc2015]Export Estimate Description 给你一个n个点m条边的无向图,每条边有权值,我们可以选择一个整数lim来生成一个新的图,过程如下:  1 ...

  10. 【Android】Could not find XXX.apk!的解决方法

    昨天在Eclipse中导入一个Android工程后点击运行时出现了Could not find XXX.apk!的错误信息,具体错误提示如下:   到网上搜了好多方法,挨个尝试,最后都没解决但是,重启 ...