指定路线的模型(Specifying a Route's Model)
您可以通过在路径中定义与数据模板同名的模板名称并实现其模型挂钩来指定路径模型。
Ember.Route.extend ({
model: function() {
return { //value-1 },{ //value-2 },{..},{ //value-n };
}
});
在上面的代码中，value-1到value-n变量用于存储模板中调用的值。
下表列出了不同类型的Specifying Routes模型 -
| S.No. | 指定路由和描述 |
|---|---|
| 1 | Dynamic Models 它定义了具有动态段的路由，Ember使用它来访问URL中的值。 |
| 2 | 多种模式 您可以使用RSVP.hash定义多个模型，这些模型进一步使用对象返回promise。 |
例子 (Example)
以下示例显示如何指定显示数据的路径。 创建前面章节中指定的新路由。 现在使用以下代码打开router.js文件以定义URL映射 -
import Ember from 'ember';
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config
//The const declares read only variable
const Router = Ember.Router.extend ({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('specifyroute');
});
//It specifies Router variable available to other parts of the app
export default Router;
创建application.hbs文件并添加以下代码 -
//link-to is a handlebar helper used for creating links
{{#link-to 'specifyroute'}}Click here to see details{{/link-to}}
{{outlet}} //It is a general helper, where content from other pages will
appear inside this section
使用以下代码打开在app/templates/下创建的specifyroute.hbs文件 -
<h2>List of Players</h2>
<ul>
//The <i>each</i> helper to loop over each item in the array provided from model() hook
{{#each model as |player|}}
<li>{{player}}</li>
{{/each}}
</ul>
{{outlet}}
要构造URL，您需要实现模型以返回值 -
import Ember from 'ember';
export default Ember.Route.extend ({
//The model() method returns the data which you want to make available to the template
model() {
return ['MS Dhoni', 'Steve Smith', 'Jason Roy','AB de Villiers','Kane Williamson'];
}
});
输出 (Output)
运行ember服务器，您将收到以下输出 -
当您单击输出中的链接时，它将生成结果，如以下屏幕截图所示 -
