EmberJS 定义路由
定义路由
路由器将当前URL与负责显示模板，加载数据和设置应用程序状态的路由相匹配。映射方法路由器用于定义URL映射，它传递一个函数，该函数将参数作为对象来创建路由。 {{link-to}} 助手会导航路由器。
Router.map(function() {
this.route('link-page', { path: '/PathTolinkpage' });
.
.
this.route('link-page', { path: '/PathTolinkpage' });
});
上面的代码描述如何使用路由器映射来链接不同的页面。它将 linkpage 名称和路径作为参数。
例子
<!DOCTYPE html>
<html>
<head>
<title>Emberjs Router</title>
<!-- CDN's-->
<script src="/attachements/w3c/handlebars.min.js"></script>
<script src="/attachements/w3c/jquery-2.1.3.min.js"></script>
<script src="/attachements/w3c/ember-template-compiler.js"></script>
<script src="/attachements/w3c/ember.min.js"></script>
<script src="/attachements/w3c/ember.prod.js"></script>
<script src="/attachements/w3c/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<!-- link-to for navigation between the routes -->
{{#link-to 'authors'}}AuthorInfo{{/link-to}}
{{#link-to 'books'}}BookInfo{{/link-to}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="authors">
<h2>Authors Page </h2>
<ul>
<li>Herbert Schildt</li>
<li>Robert Lafore</li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="books">
<h2>Books Page</h2>
<ul>
<li>Java</li>
<li>C++</li>
</ul>
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.Router.map(function() {
//refers to the authors template and path refers within page
this.route('authors', { path: '/' });
//refers to the books template
this.route('books');
});
</script>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码如何工作：
将上述代码保存在 routing.html 文件中
在浏览器中打开此HTML文件。
| 序号 | 路由及描述 |
|---|---|
| 1 | 嵌套路由 定义嵌套路由。 |
| 2 | 动态细分 动态细分是网址的一部分。 |
| 3 | 通配符/ Globbing路由 用于匹配多个路由的通配符路由。 |