Emberjs-temp-link-addtnl-attr

リンクのテンプレート追加属性

リンク先ヘルパーを使用して、リンクに追加の属性を追加できます。

構文

{{link-to 'link-text' 'route-name' class = "btn-primary"}}

例

この例は、リンクに追加の属性を追加する方法を示しています。 _info_という名前のルートを作成し、_router.js_ファイルを開いてURLマッピングを定義します-

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

const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('info');
});

export default Router;

次のコードで_app/templates/_の下に作成されたファイル_application.hbs_ファイルを開きます-

//Adding the additional attributes on a link as class = "btn btn-primary"
{{link-to 'Click For Fruits List' 'info' class = "btn btn-primary"}}
{{outlet}}

「果物リストをクリック」リンクをクリックすると、次のコードを含む_info.hbs_ファイルが開きます-

<p>Some Fruits</p>
<ul>
   <li>Orange</li>
   <li>Banana</li>
</ul>
{{outlet}}

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsテンプレート追加属性

次に、Click For Fruits Listをクリックすると、テンプレートファイルから次のテキストが表示されます-

Ember.jsテンプレート追加属性