Emberjs-temp-link-mult-segmn

EmberJS-複数のセグメントのテンプレート

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

構文

Router.map(function() {
   this.resource('route_name');
   this.resource('route_name', { path: 'route_path' });
});

Copy

例

この例では、セグメントに識別子を指定することにより、ネストされたルートで複数のセグメントを使用しています。 _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', { path: 'records/:records_id' });
});

export default Router;

Copy

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

{{#link-to 'info'}}Fruits{{/link-to}}
{{#link-to 'record' recoModel}}Some Record{{/link-to}}
{{outlet}}

Copy

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

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

Copy

Some _Record link_をクリックすると、次のコードを含む_record.hbs_ファイルが開きます-

<p>Some Records</p>
{{model.name}}
{{outlet}}

Copy

ここで、_app/controller/_の下に次のコードで作成されるコントローラー_application.js_を作成します-

import Ember from 'ember';

export default Ember.Controller.extend ({
   recoModel: function(){
     //return the records value to the called route
      return {records_id:1, name:'Docs List'};
   }.property()
});

Copy

出力

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

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

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

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

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

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