መንገድ ፍለጋ

5

የተተረጎመው መጠን

በዚህ ምዕራፍ:

  • ሰለሚትዩር መንገድ ፈለጋ ይማሩ።
  • ባለልዩ ዩኣርኤል (URL) የውይይት ገልጾችን ይፍጠሩ።
  • ወደ እነዚ ዩኣርኤሎችን እንዴት በትክክለኛው ማገናኛ እንደሚፈጥሩ ይማሩ።
  • ////

    ////

    ////

    “Iron Router” ጥቅልን መጨመር

    ////

    ////

    ////

    $ mrt add iron-router
    
    Terminal

    ////

    ////

    የመንገድ ኣፍላጊ መዝገበ ቃላት

    ////

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

    ////

    መንገድ መፈለግ፤ ዩኣርኤሎችን ከቅንብር ደንቦች ጋር ማጣመር

    ////

    ////

    ////

    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

    ////

    /lib ኣቃፊ

    ////

    ////

    ስምያላቸው መንገድ መፈለጊያዎች

    ////

    ////

    ////

    ////

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

    ውሂብን መጠበቅ

    ////

    ////

    ////

    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

    ////

    ኣከማች 5-2

    Wait on the post subscription.

    ቅፅበታውነትን በጨረፍታ

    ////

    ////

    ////

    ወደ ተወሰነ ተለጣፊ መንገድ መፈለግ

    ////

    ////

    ////

    <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

    ////

    ////

    ስለውሂብ ኣግባብ በተጨማሪ

    ////

    ////

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

    ////

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

    ////

    {{> widgetPage myWidget}}
    

    ተለዋዋጭ ባለስም የመንገድ መፈለጊያ ረጂ ኣጠቃቀም

    ////

    ////

    <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

    ኣከማች 5-3

    Routing to a single post page.

    ////

    ////

    ////

    ////

    ////

    A single post page.
    A single post page.

    ኤችቲኤምኤል5 ፑሽእስቴት (HTML5 pushState)

    ////

    ////

    ////