#7 Links

英文原版：https://guides.emberjs.com/v2.13.0/templates/links/

{{link-to}}組件

通過{{link-to}}組件創建一個鏈接到某個路由的超鏈接。

app/router.js

Router.map(function() {
  this.route('photos', function(){
    this.route('edit', { path: '/:photo_id' });
  });
});

app/templates/photos.hbs

<ul>
  {{#each photos as |photo|}}
    <li>{{#link-to "photos.edit" photo}}{{photo.title}}{{/link-to}}</li>
  {{/each}}
</ul>

如果，photos模板的model中有3個photo，那麼將會得到如下渲染結果：

<ul>
  <li><a href="/photos/1">Happy Kittens</a></li>
  <li><a href="/photos/2">Puppy Running</a></li>
  <li><a href="/photos/3">Mountain Landscape</a></li>
</ul>

{{link-to}}組件可以接收2個參數：

1. 路由名稱。在本例中，它可以是index，photots或者photos.edit。
2. 用來匹配動態端的model。默認的，Ember.js會用對應對象的id屬性來替換掉動態段。在本例中，第二個參數代表每一個photo對象，並且使用id屬性來填充動態段。如果你不傳入model，你也可以顯示的用一個值來作爲第二個參數來填充動態段。

app/templates/photos.hbs

{{#link-to "photos.edit" 1}}
  First Photo Ever
{{/link-to}}

當鏈接與當前的路由匹配時，那麼鏈接對應的對象就會被傳入link-to組件中，然後該link會被添加一個active類。例如，如果你當前訪問的是 /photos/2，那麼上面的例子中的鏈接將會被渲染至如下：

<ul>
  <li><a href="/photos/1">Happy Kittens</a></li>
  <li><a href="/photos/2" class="active">Puppy Running</a></li>
  <li><a href="/photos/3">Mountain Landscape</a></li>
</ul>

多動態段

如果你的路由是嵌套的，那麼你可以爲每個動態段提供一個model或標識符。

app/router.js

Router.map(function() {
  this.route('photos', function(){
    this.route('photo', { path: '/:photo_id' }, function(){
      this.route('comments');
      this.route('comment', { path: '/comments/:comment_id' });
    });
  });
});

app/templates/photo/index.hbs

<div class="photo">
  {{body}}
</div>

<p>{{#link-to "photos.photo.comment" primaryComment}}Main Comment{{/link-to}}</p>

如果你僅僅指定一個model，那麼它將對應最內層的路由的動態段:comment_id。:photo_id將會對應當前的那個photo。

不過，這時候你可同時傳入photo ID和comment 。

app/templates/photo/index.hbs

<p>
  {{#link-to 'photo.comment' 5 primaryComment}}
    Main Comment for the Next Photo
  {{/link-to}}
</p>

在上面的例子中，Photo路由的model( )鉤子將會收到params.photo_id=5。Comment路由的model( )鉤子僅僅會在你爲comment動態段提供了model對象之後才被調用。並且comment的id將會Comment通過路由的serialize( ) 鉤子填充到url中。

設置查詢參數

query-params助手會幫在link-to上設置查詢參數：

// Explicitly set target query params
{{#link-to "posts" (query-params direction="asc")}}Sort{{/link-to}}

// Binding is also supported
{{#link-to "posts" (query-params direction=otherDirection)}}Sort{{/link-to}}

{{link-to}}的行內方式

除了塊方式之外，你還可以通過行內方式來使用{{link-to}}組件，將鏈接文本作爲第一個參數傳給組件即可：

A link in {{#link-to "index"}}Block Expression Form{{/link-to}},
and a link in {{link-to "Inline Form" "index"}}.

輸出：

A link in <a href="/">Block Expression Form</a>,
and a link in <a href="/">Inline Form</a>.

添加額外的屬性

你或許想給link上添加一些其他的屬性。直接參考下面：

<p>
  {{link-to "Edit this photo" "photo.edit" photo class="btn btn-primary"}}
</p>

大多數HTML標準屬性都可以這個直接加上去。當你添加class屬性後，Ember將會默認的爲這個元素加上ember-view類，並且如果是鏈接的話，根據鏈接的狀態加上active類。

替換history記錄

link-to的默認行爲是向history中添加記錄，如果你想要替換掉上一條記錄，設置replace=true即可：

<p>
  {{#link-to "photo.comment" 5 primaryComment replace=true}}
    Main Comment for the Next Photo
  {{/link-to}}
</p>

本節完