Emberjs-temp-link-inlin-helpr

EmberJS-インラインヘルパーとしてのテンプレートリンク

ヘルパーへの最初の引数としてリンクテキストを指定することにより、_link-to_をインラインコンポーネントとして使用できます。

構文

Click for {{#link-to 'link1'}}more info{{/link-to}},
info of {{link-to 'link text' 'link2'}}.

例

以下の例では、ヘルパーへの最初の引数を指定することにより、インラインコンポーネントとして_link-to_を使用しています。 _info_と_record_の名前で2つのルートを作成し、_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');
   this.route('record');
});

export default Router;

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

Click for the {{#link-to 'info'}}Fruits{{/link-to}} information, for the documentation
{{link-to 'Click for records''record'}}
{{outlet}}

あなたが「果物」リンクをクリックすると、ページは次のコードを含む_info.hbs_ファイルを開く必要があります-

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

_Click for records_リンクをクリックすると、次のコードを含む_record.hbs_ファイルが開きます-

<p>Some Records</p>
<ul>
   <li>Orange.doc</li>
   <li>Banana.doc</li>
</ul>
{{outlet}}

出力

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

Ember.jsテンプレートインラインヘルパー

_info_をクリックすると、テンプレートファイルから以下のテキストが表示されます-

Ember.jsテンプレートインラインヘルパー

_Click for records_をクリックすると、テンプレートファイルから以下のテキストが表示されます-

Ember.jsテンプレートインラインヘルパー