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

    ////

    ////

    ////

    meteor 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 navbar-default" role="navigation"> 
          <div class="navbar-header">
            <a class="navbar-brand" href="/">Microscope</a>
          </div>
        </header>
        <div id="main" class="row-fluid">
          {{> yield}}
        </div>
      </div>
    </template>
    
    client/templates/application/layout.html

    ////

    ////

    ////

    Router.configure({
      layoutTemplate: 'layout'
    });
    
    Router.route('/', {name: 'postsList'});
    
    lib/router.js

    ////

    ////

    The /lib folder

    ////

    ////

    Named Routes

    ////

    ////

    ////

    ////

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

    Waiting On Data

    ////

    ////

    ////

    ////

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

    ////

    ////

    Get A Load Of This

    ////

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

    ////

    ////

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

    ////

    ////

    A First Glance At Reactivity

    ////

    ////

    ////

    Routing To A Specific Post

    ////

    ////

    ////

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

    ////

    ////

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

    ////

    ////

    ////

    ////

    The data context.
    The data context.

    ////

    Router.configure({
      layoutTemplate: 'layout',
      loadingTemplate: 'loading',
      waitOn: function() { return Meteor.subscribe('posts'); }
    });
    
    Router.route('/', {name: 'postsList'});
    Router.route('/posts/:_id', {
      name: 'postPage',
      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 btn-default">Discuss</a>
      </div>
    </template>
    
    client/templates/posts/post_item.html

    ////

    ////

    ////

    ////

    ////

    A single post page.
    A single post page.

    HTML5 pushState

    ////

    ////

    ////

    Post Not Found

    ////

    ////

    ////

    <template name="notFound">
      <div class="not-found jumbotron">
        <h2>404</h2>
        <p>Sorry, we couldn't find a page at this address.</p>
      </div>
    </template>
    
    client/templates/application/not_found.html

    ////

    Router.configure({
      layoutTemplate: 'layout',
      loadingTemplate: 'loading',
      notFoundTemplate: 'notFound',
      waitOn: function() { return Meteor.subscribe('posts'); }
    });
    
    //...
    
    lib/router.js

    ////

    ////

    ////

    //...
    
    Router.onBeforeAction('dataNotFound', {only: 'postPage'});
    
    lib/router.js

    ////

    Why “Iron”?

    ////