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 链接时,它将显示来自模板文件的以下文本 −
