返回介绍

控制器 - 代表单一模型

发布于 2020-02-21 15:48:03 字数 2769 浏览 994 评论 0 收藏 0

英文原文:http://emberjs.com/guides/controllers/representing-a-single-model-with-objectcontroller/

Ember.ObjectController用于代表单一模型。通过在路由的setupController方法中设置ObjectControllermodel属性,来指定其代表的模型。

当模板向ObjectController请求属性时,控制器将首先检查是否定义有该属性,如果有,则返回其当前值。

然而,当控制器没有定义该属性时,就将返回其代表的模型的该属性的值。

例如,在编写一个音乐播放器时,可以定义一个SongController来代表当前播放的歌曲。

1
2
3
App.SongController = Ember.ObjectController.extend({
  soundVolume: 1
});

在路由中,设置控制器的model属性为当前播放的歌曲。

1
2
3
4
5
App.SongRoute = Ember.Route.extend({
  setupController: function(controller, song) {
    controller.set('model', song);
  }
});

在模板中,可以显示当前播放的歌曲的名称,以及播放的音量。

1
2
3
4
5
6
<p>
  <strong>Song</strong>: {{name}} by {{artist}}
</p>
<p>
  <strong>Current Volume</strong>: {{soundVolume}}
</p>

因为nameartist都是在模型中被持久化的信息,控制器从模型中获取这些信息,并提供给模板。

然而soundVolume则是与当前用户回话相关的,并存储在控制器中,因此控制器可以直接返回其值。

这样的架构的优点是可以很容易的通过对象控制器来访问模型的属性。另外,如果需要为模板转换模型的属性,控制器是一个非常合适的地方来完成这样的工作,避免了将视图的逻辑放入到模型中去。

例如,音乐播放器需要显示歌曲的时长。

1
2
3
4
5
6
<p>
  <strong>Song</strong>: {{name}} by {{artist}}
</p>
<p>
  <strong>Duration</strong>: {{duration}}
</p>

由于时长在服务器端被保存为一个以秒为单位的整数,这时模板的输出为:

1
2
3
4
5
6
<p>
  <strong>Song</strong>: 4 Minute Warning by Radiohead
</p>
<p>
  <strong>Duration</strong>: 257
</p>

由于音乐播放器的用户是人类而非机器,因此应该将歌曲时长显示为可读的格式。

可以在控制器中定义一个计算属性来转换模型的值为一个对于模板来说更加具有可读性的属性。

1
2
3
4
5
6
7
8
9
App.SongController = Ember.ObjectController.extend({
  duration: function() {
    var duration = this.get('model.duration'),
         minutes = Math.floor(duration / 60),
         seconds = duration % 60;

    return [minutes, seconds].join(':');
  }.property('model.duration')
});

现在,模板的输出变得更加友好。

1
2
3
4
5
6
<p>
  <strong>Song</strong>: 4 Minute Warning by Radiohead
</p>
<p>
  <strong>Duration</strong>: 4:17
</p>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文