JSRUN 用代码说话

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

编辑教程

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

在有路由嵌套的情况下,你可能需要在两个不同的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模板中显示模型post和comment的信息。

<h1>Comments for {{post.title}}</h1>
<ul>
    {{#each model as |comment|}}
        <li>{{comment.text}}</li>
    {{/each}}
</ul>
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟