Collections

4

Percentage Translated

In this chapter, you will:

  • Learn about Meteor's core feature, realtime collections.
  • Understand how Meteor's data synchronization works.
  • Integrate collections with our templates.
  • Turn our basic prototype into a functioning realtime application!
  • ////

    ////

    ////

    ////

    ////

    Posts = new Mongo.Collection('posts');
    
    lib/collections/posts.js

    Commit 4-1

    Added a posts collection

    To Var Or Not To Var?

    ////

    Storing Data

    ////

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

    ////

    Client & Server

    ////

    ////

    ////

    Console vs Console vs Console

    ////

    Terminal

    The Terminal
    The Terminal
    • ////
    • ////
    • ////
    • ////

    Browser Console

    The Browser Console
    The Browser Console
    • ////
    • ////
    • ////
    • ////

    Mongo Shell

    The Mongo Shell
    The Mongo Shell
    • ////
    • ////
    • ////
    • ////

    ////

    Server-Side Collections

    ////

    ////

    meteor mongo
    
    > db.posts.insert({title: "A new post"});
    
    > db.posts.find();
    { "_id": ObjectId(".."), "title" : "A new post"};
    
    The Mongo Shell

    Mongo on Meteor.com

    ////

    ////

    ////

    Client-Side Collections

    ////

    ////

    ////

    Introducing MiniMongo

    ////

    Client-Server Communication

    ////

    ////

    ////

    ////

    > db.posts.find();
    {title: "A new post", _id: ObjectId("..")};
    
    The Mongo Shell
     Posts.findOne();
    {title: "A new post", _id: LocalCollection._ObjectID};
    
    First browser console

    ////

     Posts.find().count();
    1
     Posts.insert({title: "A second post"});
    'xxx'
     Posts.find().count();
    2
    
    First browser console

    ////

    ❯ db.posts.find();
    {title: "A new post", _id: ObjectId("..")};
    {title: "A second post", _id: 'yyy'};
    
    The Mongo Shell

    ////

    ////

     Posts.find().count();
    2
    
    Second browser console

    ////

    ////

    ////

    Populating the Database

    ////

    ////

    ////

    ////

    meteor reset
    

    ////

    ////

    meteor
    

    ////

    if (Posts.find().count() === 0) {
      Posts.insert({
        title: 'Introducing Telescope',
        url: 'http://sachagreif.com/introducing-telescope/'
      });
    
      Posts.insert({
        title: 'Meteor',
        url: 'http://meteor.com'
      });
    
      Posts.insert({
        title: 'The Meteor Book',
        url: 'http://themeteorbook.com'
      });
    }
    
    server/fixtures.js

    Commit 4-2

    Added data to the posts collection.

    ////

    ////

    Dynamic Data

    ////

     Posts.find().fetch();
    
    Browser console

    ////

    ////

    ////

    Template.postsList.helpers({
      posts: function() {
        return Posts.find();
      }
    });
    
    client/templates/posts/posts_list.js

    Commit 4-3

    Wired collection into `postsList` template.

    Find & Fetch

    ////

    ////

    ////

    Using live data
    Using live data

    ////

    ////

     Posts.insert({
      title: 'Meteor Docs',
      author: 'Tom Coleman',
      url: 'http://docs.meteor.com'
    });
    
    Browser console

    ////

    Adding posts via the console
    Adding posts via the console

    ////

    Inspecting DOM Changes

    ////

    ////

    Connecting Collections: Publications and Subscriptions

    ////

    ////

    meteor remove autopublish
    

    ////

    ////

    ////

    Meteor.publish('posts', function() {
      return Posts.find();
    });
    
    server/publications.js

    ////

    Meteor.subscribe('posts');
    
    client/main.js

    Commit 4-4

    Removed `autopublish` and set up a basic publication.

    ////

    Conclusion

    ////