Templates

3

Tercüme Yüzdesi

Bu bölümde:

  • Learn about Meteor's templating language, Handlebars.
  • 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">
          <div class="navbar-inner">
            <a class="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/views/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/views/posts/post_item.html

    ////

    ////

    ////

    ////

    ////

    Going Further

    ////

    ////

    ////

    ////

    ////

    ////

    Template Managers

    ////

    ////

    ////

    Managers?

    ////

    ////

    ////

    ////

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

    ////

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

    Commit 3-1

    Added basic posts list template and static data.

    ////

    ////

    ////

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

    ////

    The Value of “this”

    ////

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

    Commit 3-2

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

    ////

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

    ////

    ////

    ////

    ////

    JavaScript Magic

    ////

    ////

    ////

    ////

    Hot Code Reload

    ////

    ////

    ////