Emberjs-temp-link-mult-segmn
提供:Dev Guides
EmberJS-複数のセグメントのテンプレート
複数のセグメントの場合、ルートがネストされている場合、各セグメントのモデルまたは識別子を提供できます。
構文
Router.map(function() {
this.resource('route_name');
this.resource('route_name', { path: 'route_path' });
});
例
この例では、セグメントに識別子を指定することにより、ネストされたルートで複数のセグメントを使用しています。 _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;
次のコードで_app/templates/_の下に作成されたファイル_application.hbs_ファイルを開きます-
{{#link-to 'info'}}Fruits{{/link-to}}
{{#link-to 'record' recoModel}}Some Record{{/link-to}}
{{outlet}}
あなたが「果物」リンクをクリックすると、ページは次のコードを含む_info.hbs_ファイルを開く必要があります-
<p>Some Fruits</p>
<ul>
<li>Orange</li>
<li>Banana</li>
</ul>
{{outlet}}
Some _Record link_をクリックすると、次のコードを含む_record.hbs_ファイルが開きます-
<p>Some Records</p>
{{model.name}}
{{outlet}}
ここで、_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()
});
出力
emberサーバーを実行します。次の出力が表示されます-
_Fruits_リンクをクリックすると、テンプレートファイルから次のテキストが表示されます-
_Some Record_リンクをクリックすると、テンプレートファイルから次のテキストが表示されます-