W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
在有路由嵌套的情況下,你可能需要在兩個(gè)不同的controller
之間通信。
按照慣例先做準(zhǔn)備工作:
ember g route post
ember g route post/comments
ember g model post
比如下面的路由設(shè)置:
// 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;
對(duì)于這個(gè)路由配置生成的路由表請(qǐng)看Ember.js 入門指南之十三{{link-to}} 助手。
如果用戶訪問/posts/1/comments
。模型post
就會(huì)加載到postController
,并不會(huì)直接加載到commentsController
。然后如果你想在一篇post
中顯示comment
信息呢?
為了實(shí)現(xiàn)這個(gè)功能,可以把postController
注入到commentController
中。
// app/controllers/comments.js
import Ember from 'ember';
export default Ember.Controller.extend({
postController: Ember.inject.controller('post')
});
一旦comments
路由被訪問,postController
就會(huì)獲取控制器對(duì)應(yīng)的model
,并且這個(gè)model
是只讀的。為了能獲取到模型post
還需要增加一個(gè)引用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
的信息。
<h2>Comments for {{post.title}}</h2>
<ul>
{{#each model as |comment|}}
<li>{{comment.text}}</li>
{{/each}}
</ul>
有關(guān)更多別名的介紹請(qǐng)移步這里查看API文檔的介紹。如果你想了解更多關(guān)于注入的問題請(qǐng)看這里的教程(新版官網(wǎng)已經(jīng)沒有這個(gè)地址的文檔了)。
controller
這章的內(nèi)容到此也全部介紹完畢了,只有寥寥的2篇教程,可見controller
在Ember未來版本會(huì)被組件替代已成必然。
那么下一章將為大伙介紹模型,模型對(duì)于Ember來說是一塊非常重要的內(nèi)容,內(nèi)容也比較多!我回用9篇文章來給你介紹模型,從定義到其使用等等內(nèi)容。
博文完整代碼放在Github(博文經(jīng)過多次修改,博文上的代碼與github代碼可能有出入,不過影響不大?。绻阌X得博文對(duì)你有點(diǎn)用,請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star
吧。您的肯定對(duì)我來說是最大的動(dòng)力??!
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: