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.hbs文件，其中包含以下代码 −

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

现在创建控制器application.js，它将在app/controller/下创建，代码如下 −

import Ember from 'ember';

export default Ember.Controller.extend ({
   recoModel: function(){
      //将记录值返回给被调用的路由
      return {records_id:1, name:'Docs List'};
   }.property()
});

输出

运行 ember 服务器；您将收到以下输出 −

当您单击 Fruits 链接时，它将显示来自模板文件的以下文本 −

当您单击 Some Record 链接时，它将显示来自模板文件的以下文本 −

emberjs_template.html