Routing

5

אחוז תורגם

בפרק זה:

  • Learn about routing in Meteor.
  • Create post discussion pages, with unique URLs.
  • Learn how to link to those URLs properly.
  • ////

    ////

    ////

    Adding the Iron Router Package

    ////

    ////

    ////

    $ mrt add iron-router
    
    Terminal

    ////

    ////

    Router Vocabulary

    ////

    • ////
    • ////
    • ////
    • ////
    • ////
    • ////
    • ////
    • ////

    ////

    Routing: Mapping URLs To Templates

    ////

    ////

    ////

    Layouts and templates.
    Layouts and templates.

    ////

    ////

    <head>
      <title>Microscope</title>
    </head>
    
    client/main.html

    ////

    <template name="layout">
      <div class="container">
      <header class="navbar">
        <div class="navbar-inner">
          <a class="brand" href="/">Microscope</a>
        </div>
      </header>
      <div id="main" class="row-fluid">
        {{yield}}
      </div>
      </div>
    </template>
    
    client/views/application/layout.html

    ////

    ////

    Router.configure({
      layoutTemplate: 'layout'
    });
    
    Router.map(function() {
      this.route('postsList', {path: '/'});
    });
    
    lib/router.js

    ////

    The /lib folder

    ////

    ////

    Named Routes

    ////

    ////

    ////

    ////

    <header class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="{{pathFor 'postsList'}}">Microscope</a>
      </div>
    </header>
    
    //...
    
    client/views/application/layout.html

    Commit 5-1

    Very basic routing.

    Waiting on Data

    ////

    ////

    ////

    Router.configure({
      layoutTemplate: 'layout',
      loadingTemplate: 'loading',
      waitOn: function() { return Meteor.subscribe('posts'); }
    });
    
    Router.map(function() {
      this.route('postsList', {path: '/'});
    });
    
    lib/router.js

    ////

    ////

    ////

    ////

    ////

    ////

    <template name="loading">
      {{>spinner}}
    </template>
    
    client/views/includes/loading.html

    ////

    Commit 5-2

    Wait on the post subscription.

    A First Glance At Reactivity

    ////

    ////

    ////

    Routing To A Specific Post

    ////

    ////

    ////

    <template name="postPage">
      {{> postItem}}
    </template>
    
    client/views/posts/post_page.html

    ////

    ////

    Router.map(function() {
      this.route('postsList', {path: '/'});
    
      this.route('postPage', {
        path: '/posts/:_id'
      });
    });
    
    
    lib/router.js

    ////

    ////

    ////

    ////

    The data context.
    The data context.

    ////

    Router.map(function() {
      this.route('postsList', {path: '/'});
    
      this.route('postPage', {
        path: '/posts/:_id',
        data: function() { return Posts.findOne(this.params._id); }
      });
    });
    
    
    lib/router.js

    ////

    ////

    More About Data Contexts

    ////

    ////

    {{#each widgets}}
      {{> widgetItem}}
    {{/each}}
    

    ////

    {{#with myWidget}}
      {{> widgetPage}}
    {{/with}}
    

    ////

    {{> widgetPage myWidget}}
    

    Using a Dynamic Named Route Helper

    ////

    ////

    <template name="postItem">
      <div class="post">
        <div class="post-content">
          <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
        </div>
        <a href="{{pathFor 'postPage'}}" class="discuss btn">Discuss</a>
      </div>
    </template>
    
    client/views/posts/post_item.html

    Commit 5-3

    Routing to a single post page.

    ////

    ////

    ////

    ////

    ////

    A single post page.
    A single post page.

    HTML5 pushState

    ////

    ////

    ////