免費(fèi)AI編程助手
Ember {{link-to}} 助手
1，link-to助手常規(guī)使用
link-to助手表達(dá)式渲染之后就是一個(gè)a標(biāo)簽。而a標(biāo)簽的href屬性的值是根據(jù)路由生成的，與路由的設(shè)置是息息相關(guān)的。并且每個(gè)設(shè)置的路由名稱都是有著對(duì)應(yīng)的關(guān)系的。
為了演示效果，用命令生成了一個(gè)route（或者手動(dòng)創(chuàng)建文件）并獲取測(cè)試數(shù)據(jù)。本文結(jié)合路由設(shè)置，隨便串講了一些路由方面的知識(shí)，如果你能看懂最好了，看不懂也不要緊后面會(huì)有一整章介紹路由。
1, 增加子路由
// app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('posts', function() {
this.route('detail', {path: '/:post_id'}); //指定子路由，:post_id會(huì)自動(dòng)轉(zhuǎn)換為數(shù)據(jù)的id
});
});
export default Router;如上述代碼，在posts下增加一個(gè)子路由detail。并且指定路由名為/:post_id，:post_id是一個(gè)動(dòng)態(tài)字段，一般情況下默認(rèn)為model的id屬性。經(jīng)過(guò)模板渲染之后會(huì)得到類似于posts/1、posts/2這種形式的路由。
2, 在route初始化數(shù)據(jù)
// app/routes/posts.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
}
});使用Ember提供的方法直接從遠(yuǎn)程獲取測(cè)試數(shù)據(jù)。測(cè)試數(shù)據(jù)的格式可以用瀏覽器直接打開上面的URL就可以看到。
3，添加顯示的模板
<div class="container">
<div class="row">
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul class="list-group">
{{#each model as |item|}}
<li class="list-group-item">
{{#link-to 'posts.detail' item}}
{{item.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>直接用{{#each}}遍歷出所有的數(shù)據(jù)，并顯示在界面上，由于數(shù)據(jù)比較多可能顯示的比較慢，特別是頁(yè)面刷新之后看到一片空白，請(qǐng)不要急著刷新頁(yè)面，等待一下即可……。下圖是結(jié)果的一部分：
我們查看頁(yè)面的源代碼，可以看到link-to助手渲染之后的HTML代碼，自動(dòng)生成了URL，在router.js里配置的post_id渲染之后都被model的id屬性值代替了。
如果你沒(méi)有測(cè)試數(shù)據(jù)，你還可直接把link-to助手的post_id寫死，可以直接把數(shù)據(jù)的id值設(shè)置到link-to助手上。在模板文件的ul標(biāo)簽下一行增加如下代碼，在link-to助手中指定id為1：
<li class="list-group-item">
{{#link-to 'posts.detail' 1}}增加一條直接指定id的數(shù)據(jù){{/link-to}}
</li>渲染之后的HTML代碼如下:
<li class="list-group-item">
<a id="ember404" href="/posts/1" class="ember-view">增加一條直接指定id的數(shù)據(jù)
</a>
</li>可以看到與前面使用動(dòng)態(tài)數(shù)據(jù)渲染之后的href的格式是一樣的。如果你想設(shè)置某個(gè)a標(biāo)簽是激活狀態(tài)，你可以直接在標(biāo)簽上增加一個(gè)CSS類（class=”active”）。
2，link-to助手設(shè)置多個(gè)動(dòng)態(tài)字段
開發(fā)中，路由的路徑經(jīng)常不是2層的（post/1）也有可能是多層次的（post/1/comment、post/1/2或者post/1/comment/2等等形式。），如果是這種形式的URL在link-to助手上又要怎么去定義呢？
老樣子，在演示模板之前還是需要先構(gòu)建好測(cè)試數(shù)據(jù)以及修改對(duì)應(yīng)的路由設(shè)置，此時(shí)的路由設(shè)置是多層的，因?yàn)?code>link-to助手渲染之后得到的href屬性值就是根據(jù)路由生成的?。?！這個(gè)必須要記得……
1. 一個(gè)路由下有個(gè)多子路由
// app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
// this.route('handlebarsConditionsExpRoute');
// this.route('handlebars-each');
// this.route('store-categories');
// this.route('binding-element-attributes');
// link-to實(shí)例理由配置
// this.route('link-to-helper-example', function() {
// this.route('edit', {path: '/:link-to-helper-example_id'});
// });
this.route('posts', function() {
//指定子路由，:post_id會(huì)自動(dòng)轉(zhuǎn)換為數(shù)據(jù)的id
this.route('detail', {path: '/:post_id'}, function() {
//增加一個(gè)comments路由
this.route('comments');
// 第二個(gè)子路由comment，并且路由是個(gè)動(dòng)態(tài)字段comment_id
this.route('comment', {path: '/:comment_id'});
});
});
});
export default Router;
如果是上述配置，渲染之后得到的路由格式posts/detail/comments。由于獲取遠(yuǎn)程數(shù)據(jù)比較慢直接注釋掉posts.js里的model回調(diào)方法，就直接使用寫死id的方式。
注意：上述配置中，在路由detail下有2個(gè)子路由，一個(gè)是comments，一個(gè)是comment，并且這個(gè)是一個(gè)動(dòng)態(tài)段。由此模板渲染之后應(yīng)該是有2種形式的URL。一種是posts.detail.comments（posts/1/comments），另一種是posts.detail.comment（posts/1/2）。如果能理解這個(gè)那route嵌套層次再多應(yīng)該也能看明白了！
<div class="container">
<div class="row">
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul class="list-group">
<li class="list-group-item">
{{#link-to 'posts.detail.comments' 1 class='active'}}
posts.detail.comments（posts/1/comments）形式
{{/link-to}}
</li>
<li class="list-group-item">
{{#link-to 'posts.detail.comment' 1 2 class='active'}}
posts.detail.comment（posts/1/2）形式
{{/link-to}}
</li>
</ul>
</div>
</div>
</div>
</div>渲染之后的結(jié)果如下：
如果是動(dòng)態(tài)段的一般都是model的id代替，如果不是動(dòng)態(tài)段的直接顯示配置的路由名稱。
2, 多層路由嵌套
上面演示了多個(gè)子路由的情況，下面接著介紹一個(gè)路由有多個(gè)層次，并且是有個(gè)多個(gè)動(dòng)態(tài)段和非動(dòng)態(tài)段組成的情況。
首先修改路由配置，把comments設(shè)置為detail的子路由。并且在comments下在設(shè)置一個(gè)動(dòng)態(tài)段的子路由comment_id。
// app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('posts', function() {
//指定子路由，:post_id會(huì)自動(dòng)轉(zhuǎn)換為數(shù)據(jù)的id
this.route('detail', {path: '/:post_id'}, function() {
//增加一個(gè)comments路由
this.route('comments', function() {
// 在comments下面再增加一個(gè)子路由comment，并且路由是個(gè)動(dòng)態(tài)字段comment_id
this.route('comment', {path: '/:comment_id'});
});
});
});
});
export default Router;模板使用路由的方式posts.detail.comments.comment。正常情況應(yīng)該生成類似posts/1/comments/2這種格式的URL。
<div class="container">
<div class="row">
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul class="list-group">
<li class="list-group-item">
{{#link-to 'posts.detail.comments.comment' 1 2 class='active'}}
posts.detail.comments.comment（posts/1/comments/2）形式
{{/link-to}}
</li>
</ul>
</div>
</div>
</div>
</div>渲染之后得到的HTML如下：
<ul class="list-group">
<li class="list-group-item">
<a id="ember473" href="/posts/1/comments/2" class="active ember-view"> posts.detail.comments.comment（posts/1/comments/2）形式
</a>
</li>
</ul>結(jié)果正如我們預(yù)想的組成了4層路由（/posts/1/comment/2）。
補(bǔ)充內(nèi)容。
對(duì)于上述第二點(diǎn)多層路由嵌套的情況你還可以使用下面的方式設(shè)置路由和模板，并且可用同時(shí)設(shè)置了/posts/1/comments和/posts/1/comments/2。
this.route('posts', function() {
//指定子路由，:post_id會(huì)自動(dòng)轉(zhuǎn)換為數(shù)據(jù)的id
this.route('detail', {path: '/:post_id'}, function() {
//增加一個(gè)comments路由
this.route('comments');
// 路由調(diào)用：posts.detail.comment
// 注意區(qū)分與前面的設(shè)置方式，detai渲染之后會(huì)被/:post_id替換，comment渲染之后直接被comments/:comment_id替換了，
//會(huì)得到如posts/1/comments/2這種形式的URL
this.route('comment', {path: 'comments/:comment_id'});
});
});
<div class="container">
<div class="row">
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul class="list-group">
<li class="list-group-item">
{{#link-to 'posts.detail.comments' 1 class='active'}}
posts.detail.comments（/posts/1/comments）形式
{{/link-to}}
</li>
<li class="list-group-item">
{{#link-to 'posts.detail.comment' 1 2 class='active'}}
posts.detail.comments.comment（posts/1/comments/2）形式
{{/link-to}}
</li>
</ul>
</div>
</div>
</div>
</div>渲染之后的結(jié)果如下：
兩種方式定義的路由渲染的結(jié)果是一樣的，看個(gè)人喜歡了，定義方式也是非常靈活的。第一種定義方式看著比較清晰，看代碼就知道是一層層的。但是需要寫更多代碼。第二種定義方式更加簡(jiǎn)潔，不過(guò)看不出嵌套的層次。 對(duì)于上述route的設(shè)置如果還不能理解也不要緊，后面會(huì)有一整章是介紹路由的，然而你能結(jié)合link-to助手理解了路由設(shè)置對(duì)于后面route章節(jié)的學(xué)習(xí)是非常有幫助的。
3, 在link-to助手內(nèi)增加額外屬性
handlebars允許你直接在link-to助手增加額外的屬性，經(jīng)過(guò)模板渲染之后a標(biāo)簽就有了增加的額外屬性了。
比如你可用為a標(biāo)簽增加CSS的class。
{{link-to "show text info" 'posts.detail' 1 class="btn btn-primary"}}
{{#link-to "posts.detail" 1 class="btn btn-primary"}}show text info{{/link-to}}上述兩種寫法都是可以的，渲染的結(jié)果也是一樣的。渲染之后的HTML為：
<a id="ember434" href="/posts/1" class="btn btn-primary ember-view">show text info</a>注意：上述兩種方式的寫法所設(shè)置的參數(shù)的位置不能調(diào)換。但是官網(wǎng)沒(méi)有看到這方面的說(shuō)明，有可能是我的演示實(shí)例的問(wèn)題，如果讀者你的可用歡迎給我留言。
第一種方式，顯示的文字必須放在最前面，并且中間的參數(shù)是路由設(shè)置，最有一個(gè)參數(shù)是額外的屬性設(shè)置，如果你還要其他的屬性需要設(shè)置仍然只能放在最后面。
第二章方式的參數(shù)位置也是有要求的，第一個(gè)參數(shù)必須是路由設(shè)置，后面的參數(shù)設(shè)置額外的屬性。
對(duì)于渲染之后的HTML代碼中出現(xiàn)標(biāo)簽id為ember，或者ember-xxx，這些屬性都是Ember默認(rèn)生成的，我們可以暫時(shí)不用理它。
綜合，本來(lái)這篇是講解link-to的，但是由于涉及到了route的配置就順便講講，有點(diǎn)難度，主要在路由的嵌套這個(gè)知識(shí)點(diǎn)上，但是對(duì)于后面的route這一章的學(xué)習(xí)是很有幫助的，route的設(shè)置幾乎都是為URL設(shè)置的。這兩者是緊密關(guān)聯(lián)的！
博文完整代碼放在Github（博文經(jīng)過(guò)多次修改，博文上的代碼與github代碼可能又出入，不過(guò)影響不大?。绻阌X(jué)得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力??！
更多建議：