Emberjs-temp-links

提供:Dev Guides
移動先:案内検索

EmberJS-リンク

_ \ {\ {link-to}} _コンポーネントを使用して、ルートへのリンクを作成できます。

構文

{{#link-to route}}
  //code here
{{/link-to}}

次の表は、リンクのプロパティを示しています-

S.No. Links & Description
1

Multiple Segments

複数のセグメントの場合、ルートがネストされている場合、各セグメントのモデルまたは識別子を提供できます。

2

Using Link-to as an Inline Helper

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

3

Adding Additional Attributes on a Link

リンクの作成中に追加の属性をリンクに追加できます。

4

Replacing History Entries

_link-to_ヘルパーを使用して、ルート間を移動しながら、ブラウザーの履歴にエントリを追加できます。

次の例は、異なるルートにリンクする方法を示しています。 新しいルートを作成し、メモとして名前を付け、_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('note');
});

export default Router;

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

{{#link-to 'note'}}Click Here{{/link-to}}
{{outlet}}

上記のリンクをクリックすると、次のテキストを含む_note.hbs_ファイルが開きます-

<h4>Welcome to finddevguides</h4>
{{outlet}}

出力

エンバーサーバーを実行すると、次の出力が表示されます-

Ember.jsテンプレートリンク

リンクをクリックすると、次のスクリーンショットのようにテンプレートファイルのテキストが表示されます-

Ember.jsテンプレートリンク