閱讀(2.8k) 書簽贊(0) 我要糾錯(cuò)

EmberJS 定義路由

2018-01-04 13:52 更新

定義路由

路由器將當(dāng)前URL與負(fù)責(zé)顯示模板，加載數(shù)據(jù)和設(shè)置應(yīng)用程序狀態(tài)的路由相匹配。映射方法路由器用于定義URL映射，它傳遞一個(gè)函數(shù)，該函數(shù)將參數(shù)作為對(duì)象來創(chuàng)建路由。 {{link-to}} 助手會(huì)導(dǎo)航路由器。

Router.map(function() {
  this.route('link-page', { path: '/PathTolinkpage' });
  .
  .
  this.route('link-page', { path: '/PathTolinkpage' });
});

上面的代碼描述如何使用路由器映射來鏈接不同的頁面。它將 linkpage 名稱和路徑作為參數(shù)。

例子

<!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>

輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：

將上述代碼保存在 routing.html 文件中
在瀏覽器中打開此HTML文件。

序號(hào)	路由及描述
1	嵌套路由定義嵌套路由。
2	動(dòng)態(tài)細(xì)分動(dòng)態(tài)細(xì)分是網(wǎng)址的一部分。
3	通配符/ Globbing路由用于匹配多個(gè)路由的通配符路由。

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充