Templates

3

Μεταφρασμένο Ποσοστό

Σε αυτό το κεφάλαιο θα:

  • Learn about Meteor's templating language, Spacebars.
  • Create your first three templates.
  • Learn how Meteor managers work.
  • Get a basic prototype working with static data.
  • ////

    ////

    ////

    <head>
      <title>Microscope</title>
    </head>
    <body>
      <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">
          {{> postsList}}
        </div>
      </div>
    </body>
    
    client/main.html

    ////

    Meteor Templates

    ////

    ////

    Finding Files

    ////

    ////

    ////

    <template name="postsList">
      <div class="posts">
        {{#each posts}}
          {{> postItem}}
        {{/each}}
      </div>
    </template>
    
    client/templates/posts/posts_list.html

    ////

    <template name="postItem">
      <div class="post">
        <div class="post-content">
          <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
        </div>
      </div>
    </template>
    
    client/templates/posts/post_item.html

    ////

    ////

    ////

    ////

    ////

    Going Further

    ////

    ////

    ////

    ////

    ////

    Template Helpers

    ////

    ////

    ////

    Controllers?

    ////

    ////

    ////

    var postsData = [
      {
        title: 'Introducing Telescope',
        url: 'http://sachagreif.com/introducing-telescope/'
      }, 
      {
        title: 'Meteor',
        url: 'http://meteor.com'
      }, 
      {
        title: 'The Meteor Book',
        url: 'http://themeteorbook.com'
      }
    ];
    Template.postsList.helpers({
      posts: postsData
    });
    
    client/templates/posts/posts_list.js

    ////

    Our first templates with static data
    Our first templates with static data

    ////

    ////

    ////

    <template name="postsList">
      <div class="posts">
        {{#each posts}}
          {{> postItem}}
        {{/each}}
      </div>
    </template>
    
    client/templates/posts/posts_list.html

    ////

    Commit 3-1

    Added basic posts list template and static data.

    The domain Helper

    ////

    Template.postItem.helpers({
      domain: function() {
        var a = document.createElement('a');
        a.href = this.url;
        return a.hostname;
      }
    });
    
    client/templates/posts/post_item.js

    ////

    Displaying domains for each links.
    Displaying domains for each links.

    ////

    ////

    ////

    ////

    Commit 3-2

    Setup a `domain` helper on the `postItem`.

    JavaScript Magic

    ////

    ////

    ////

    ////

    Hot Code Reload

    ////

    ////

    ////