EmberJS - 模板多段

对于多段，如果你有嵌套路由，你可以为每段提供一个模型或标识符。

语法

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

示例

该示例显示了嵌套路由中如何通过为段提供标识符来使用多段。创建两个名称为 info 和 record 的路由，打开 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}}

如果您单击某些 Record 链接，页面应打开 record.hbs 文件，其中包含以下代码 −

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

现在创建控制器 application.js，它将在 app/controller/ 下创建，其中包含以下代码 −

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 服务器；您将收到以下输出 −

当您单击 水果 链接时，它将显示模板文件中以下文本 −

当您单击 某个记录 链接时，它将显示模板文件中以下文本 −