EmberJS - 指定路由模型

您可以指定路由模型，方法是在路由中定义与数据模板同名的模板名称并实现其模型挂钩。

Ember.Route.extend ({
   model: function() {
      return { //value-1 },{ //value-2 },{..},{ //value-n };
   }
});

在上面的代码中，value-1 到 value-n 变量用于存储在模板中调用的值。

下表列出了不同类型的指定路线模型 −

示例

以下示例显示如何指定用于显示的路由数据。按照前面章节中的说明创建一个新路由。现在打开 router.js 文件，使用以下代码定义 URL 映射 −

import Ember from 'ember';
//以变量形式访问 Ember.js 库 Ember
import config from './config/environment';
//它提供以变量形式访问应用程序配置数据的权限 config

//const 声明只读变量
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('specifyroute');
});

//它指定了可供应用程序其他部分使用的 Router 变量

export default Router;

创建 application.hbs 文件并添加以下代码 −

//link-to 是用于创建链接的 handlebar 帮助程序
{{#link-to 'specifyroute'}}单击此处查看详细信息{{/link-to}}
{{outlet}} //它是一个通用帮助程序，其他页面的内容将
appear inside this section

使用以下代码打开在 app/templates/ 下创建的 specifyroute.hbs 文件 −

<h2>List of Players</h2>
<ul>
   //<i>each</i> 辅助函数用于循环遍历 model() 钩子提供的数组中的每个项目
   {{#each model as |player|}}
      <li>{{player}}</li>
   {{/each}}
</ul>
{{outlet}}

To construct the URL, you need to implement model to return the values −

import Ember from 'ember';

export default Ember.Route.extend ({
   //model() 方法返回你想要提供给模板的数据
   model() {
      return ['MS Dhoni', 'Steve Smith', 'Jason Roy','AB de Villiers','Kane Williamson'];
   }
});

输出

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

当您点击输出中的链接时，它将生成如下图所示的结果 −

emberjs_router.html