使用Meteor JS的反应式联接在模板中呈现收集数据

Question

I would like to output data from two collections using a reactive join into my template, then pair the users, post and comments through a common id.

So far, I can see with Mongo commands that the JSON data exist, but my template doesn't render any data. What am I doing wrong?

FYI, the meteorpad doesn't compile but the github repo will.

Repo:

https://github.com/djfrsn/frontend-interview-test-long/tree/master/ontra/ontra

Meteor Pad Example:

http://meteorpad.com/pad/SvwkNrv5grgv2uXxH/Copy%20of%20Leaderboard

Answer 1

Your code doesn't run on meteorpad because the fetchJSONData method is executed on the server before it is defined in the common.js file. You should probably be calling the method after an event triggered on the client, or not use a method at all and simply fetch your JSON data on Meteor.startup.

Regarding the reactive join, it seems you want to do something very similar to Example 1 of the documentation: https://github.com/englue/meteor-publish-composite

Answer 2

There's so much wrong that it's hard to know where to start.

1) When you're loading the initial post and user data you're inserting the whole returned array as one element rather than inserting each element individually into your posts collection.

2) You're creating a publish subscription with the name "postsSet", but you're trying to subscribe to it with a different name.

3) You're not calling publishComposite correctly at all. You should be publishing the user required for each post as part of the children array.

4) The template needs updating based on the above

5) The username needs to be supplied via a helper.

6) You should really map the "id" attributes to Mongo's "_id" instead.

Here's come code which works. Note that you'll need to call meteor reset everytime you restart, otherwise you'll get duplicate id errors since you currently reimport the data every time.

Posts = new Mongo.Collection("Posts");
var groundPosts = new Ground.Collection(Posts);
Users = new Mongo.Collection("Users");
var groundUsers = new Ground.Collection(Users);

if (Meteor.isClient) {

  Meteor.subscribe("postsSet");

  console.log('POSTS DATA = ' + Posts.find().fetch());
  console.log('USERS DATA = ' + Users.find().fetch());

  Template.body.events({
    "submit .ontra": function (event) {    
    // This function is called when the new task form is submitted

    var text = event.target.text.value;

    Posts.insert({
      content: text,
      date: new Date() // current time
    });

    // Clear Form
    event.target.text.value = "";

    // Prevent default form submit
    return false
    }
  });

  Template.body.helpers({
    posts: function() {
      return Posts.find();
    },
  });

  Template.post.helpers({
    username: function() {
      return Users.findOne({_id: this.userId}).username;
    }
  });

}



Meteor.methods({
  'fetchJSONData': function() {

    var postsResponse = Meteor.http.call("GET","https://raw.githubusercontent.com/djfrsn/frontend-interview-test-long/master/codetest/data/posts.json");
    var usersResponse = Meteor.http.call("GET","https://raw.githubusercontent.com/djfrsn/frontend-interview-test-long/master/codetest/data/users.json");

    var postsData = JSON.parse(postsResponse.content);

    var usersData = JSON.parse(usersResponse.content);

    postsData.forEach(function (post) {

      post.date = new Date();
      post._id = String(post.id)
      delete post.id
      post.userId = String(post.userId)
      Posts.insert(post);
    });

    usersData.forEach(function (user) {
      user.date = new Date() // current time
      user._id = String(user.id)
      delete user.id
      Users.insert(user);
    });


  }
});




if (Meteor.isServer) {

  Meteor.publishComposite('postsSet', {
    find: function () {
      return Posts.find({});
    },
    children: [
      {
        find: function (post) {
          console.log("%j", post.userId);
          console.log("%j", Users.findOne({ _id: post.userId }));
          return Users.find({ _id: post.userId });
        }
      }
    ]
  });

  Meteor.call("fetchJSONData");
  //console.log('POSTS DATA = %j', Posts.find().fetch());
  //console.log('USERS DATA = %j', Users.find().fetch());

}

HTML:

<head>
  <title>ontra</title>
</head>

<body>

  <div class='container'>

    <header>
      <h1>ontra</h1>
            <form class='ontra'>
                <input type='text' name='text' placeholder="Type to add new post">
            </form>
    </header>
    <ul>
      {{#each posts}}
        {{> post}}
      {{/each}}
    </ul>

  </div>

</body>

<template name='post'>

  <li>
    <span class="text">{{content}}</span>
    <span class="text">{{username}}</span>
  </li> 

</template>