• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Ember 管理控制器之间的依赖关系

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在有路由嵌套的情况下,你可能需要在两个不同的controller之间通信。 按照惯例先做准备工作:

ember g route post
ember g route post/comments
ember g model post

比如下面的路由设置:

//  router.js


import Ember from 'ember';
import config from './config/environment';


var Router = Ember.Router.extend({
  location: config.locationType
});


Router.map(function() {
  this.route('blog-post');
  this.route('post', { path: '/posts/:post_id' }, function() {
    this.route('comments');
  });
});


export default Router;

对于这个路由配置生成的路由表请看Ember.js 入门指南之十三{{link-to}} 助手

如果用户访问/posts/1/comments。模型post就会加载到postController,并不会直接加载到commentsController。然后如果你想在一篇post中显示comment信息呢?

为了实现这个功能,可以把postController注入到commentController中。

//  app/controllers/comments.js


import Ember from 'ember';


export default Ember.Controller.extend({
    postController: Ember.inject.controller('post')
});

一旦comments路由被访问,postController就会获取控制器对应的model,并且这个model是只读的。为了能获取到模型post还需要增加一个引用postController.model

//  app/controllers/comments.js


import Ember from 'ember';


export default Ember.Controller.extend({
    postController: Ember.inject.controller('post'),
    post: Ember.computed.reads('postController.model')
});

最后可以直接在comment模板中显示模型postcomment的信息。

<h1>Comments for {{post.title}}</h1>
<ul>
    {{#each model as |comment|}}
        <li>{{comment.text}}</li>
    {{/each}}
</ul>

有关更多别名的介绍请移步这里查看API文档的介绍。如果你想了解更多关于注入的问题请看这里的教程(新版官网已经没有这个地址的文档了)。

controller这章的内容到此也全部介绍完毕了,只有寥寥的2篇教程,可见controllerEmber未来版本会被组件替代已成必然。

那么下一章将为大伙介绍模型,模型对于Ember来说是一块非常重要的内容,内容也比较多!我回用9篇文章来给你介绍模型,从定义到其使用等等内容。
博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能有出入,不过影响不大!),如果你觉得博文对你有点用,请在github项目上给我点个star吧。您的肯定对我来说是最大的动力!!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Ember model简介发布时间:2022-01-29
下一篇:
Ember 控制器发布时间:2022-01-29
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap