EmberJS 指定URL類型

2018-01-03 14:30 更新

指定URL類型

路由器還使用瀏覽器的歷史API來定位之前使用的頁(yè)面。您也可以停用位置API。

Ember.Router.extend({
  location: 'history'
});

在上面的代碼中,路由器使用瀏覽器的歷史 API。

例子

<!DOCTYPE html>
   <html>
      <head>
         <title>Emberjs Specifying the URL Type</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');
             });

             Ember.Router.extend({
             //getting the history of the pages are searched before
                location: 'history'
             });
          </script>
    </body>
 </html>

輸出

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

  • 將上述代碼保存在 routing_history.html 文件中

  • 在瀏覽器中打開此HTML文件。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)