简体   繁体   English

链接MongoDB集合

[英]Link MongoDB collections

I am trying to convert the Meteor tutorial app, simple-todo, into a forum. 我正在尝试将简单的流星教程应用程序转换为论坛。 I have a list that populates with Topics with a delete button and a radio button. 我有一个列表,其中填充有带有删除按钮和单选按钮的主题。

What I want to do, is when a Topic's radio button is selected, display all the comments associated with it. 我要做的是,选择“主题”单选按钮时,显示与之相关的所有注释。 I am trying to accomplish this by putting the topicId(originally taskId), used in the tutorial, in a new Collection called Comments. 我试图通过将教程中使用的topicId(最初是taskId)放在一个名为“注释”的新集合中来实现此目的。 I then query the Comments for that topicId.the comments are mostly copied and pasted topics, so the attributes and functionality of the two is mostly the same. 然后,我查询该topicId的注释。注释大部分是复制并粘贴的主题,因此两者的属性和功能基本相同。

I, right now, don't know how to get to the topicId from my Template.body.events . 我现在不知道如何从我的Template.body.events进入topicId。 If you can help me tie these two DB's together, that would be very helpful. 如果您可以帮助我将这两个数据库联系在一起,那将非常有帮助。

HTML: HTML:

<head>
  <title>Forum</title>
</head>

<body>

  <div class="login">
    {{> loginButtons}}
  </div>

<nav class="mainMenu">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="forum.html">Forum</a></li>
    <li><a href="about.html">About Us</a></li>
  </ul>
</nav>

<div class="container">
    <header>
        <h1>Forum</h1>
    <h2>Post a topic</h2>

  {{#if currentUser}}
     <form class="new-topic">
        <input type="topicalContent" name="topicalContent" placeholder="Type to add new topics" />
     </form>
  {{/if}}
</header>

  <table>
    <td class="topicsCol">
      <h3>Topics</h3>

      <ul class="topicsList">
        {{#each topics}}
        {{> topic}}
        {{/each}}
      </ul>
    </td>
    <td class="commentsCol">
      <h3>Comments</h3>

      <ul class="commentsList">
        {{#each comments}}
        {{> comment}}
        {{/each}}
      </ul>

      <input type="commentContent" name="commentContent" placeholder="Type to Comment" />
    </td>
  </table>
</div>
</body>

<template name="topic">
<li class="{{#if selected}}select{{/if}}">
<button class="delete">&times;</button>

<span class="topicalContent">{{topicalContent}} -<strong>{{username}}</strong></span>

<input type="radio" name="curTopic" value="{{curTopic}}" />
</li>
</template>

<template name="commentsList">
  <li class="comment">
    <button class="delete">&times;</button>
    <span class="responseContent">
      <strong>
        <!-- {{#if username === owner}}
          <style="color:red;">OP
        {{else}}-->
          {{username}}
        <!--{{/if}}-->
      </strong>: {{responseContent}}</span>
  </li>
</template>

JavaScript: JavaScript:

Topics = new Mongo.Collection("topics");
Comments = new Mongo.Collection("comments");


if(Meteor.isServer){
  Meteor.publish("topics", function(){
    return Topics.find({
      $or: [
        { owner: this.userId }
      ]
    });
  });

  Meteor.publish("comments", function(){
    return Comments.find({
      $or: [
        { parent: topicId },
        { owner: this.userId }
      ]
    });
  });
}


if (Meteor.isClient) {
  // This code only runs on the client
  Meteor.subscribe("topics");
  Meteor.subscribe("comments");

  Template.body.helpers({
      topics: function() {
      return Topics.find({}, {sort: {createdAt: -1}});
    },

    comments: function () {
      return Comments.find({parent: {parent: topicId}}, {sort: {createdAt: -1}});
    }
  });

  Template.body.events({
      "submit .new-topic": function (event) {
          //Prevent default browser form submit
          event.preventDefault();

          //Get value from form element
          var topicalContent = event.target.topicalContent.value;

      if (topicalContent == "") {
        throw new Meteor.Error("Empty Input");
      }

          //Insert a topic into the collection
          Meteor.call("addTopic", topicalContent);

          //Clear form
          event.target.topicalContent.value = "";
    },

    "submit .commentContent": function (event) {
      event.preventDefault();

      var commentContent = event.target.commentContent.value;

      Meteor.call("addComment", this.topicId);

      event.target.commentContent.value= "";
    }
  });


  Template.topic.helpers({
    isOwner: function(){
      return this.owner === Meteor.userId();
    }
  });

  Template.topic.events({
      "click .curTopic": function() {
          //Show Comments of selected radio button
      Meteor.call("showComments", this._id);
    },

    "click .delete":function () {
      Meteor.call("deleteTopic", this._id);
    }
  });

  Template.comment.helpers({
    isOwner: function(){
       return this.owner === Meteor.userId();
    }
  });
  Template.comment.events({
    "click .delete":function () {
      Meteor.call("deleteComment", this._id);
    }
  });

  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });
}

Meteor.methods({
  addTopic:function(topicalContent){
     if (!Meteor.userId()) {
       throw new Meteor.Error("not-authorized");
     }

     Topics.insert({
       topicalContent,
       createdAt: new Date(),
       owner: Meteor.userId(),
       username: Meteor.user().username
     });
  },
  deleteTopic:function(topicId) {
    var topic = Topics.findOne(topicId);
    if (topic.owner !== Meteor.userId()) {
      throw new Meteor.Error("not-authorized");
    }
    else {
      Topics.remove(topicId);
    }
  },

  showComments:function (topicId) {
    Comments.find({"parent":topicId});
  },
  addComment:function(commentContent, topicId){
     if (!Meteor.userId()) {
       throw new Meteor.Error("not-authorized");
     }

     Comments.insert({
       commentContent,
       createdAt: new Date(),
       owner: Meteor.userId(),
       username: Meteor.user().username,
       parent: topicId
     });
  },
  deleteComment:function(commentId) {
    var comment = Comments.findOne(commentId);
    if (comment.owner !== Meteor.userId()) {
      throw new Meteor.Error("not-authorized");
    }
    else {
      Comments.remove(commentId);
    }
  }
});

One way (and there are many) is to use a session variable to track the current topic. 一种方法 (有很多方法)是使用会话变量来跟踪当前主题。 In your topic event handler: 在您的topic事件处理程序中:

Template.topic.events({
  "click .curTopic": function() {
    Session.set('topicId',this._id); // set the Session variable
    Meteor.call("showComments", this._id);
});

Now everywhere else you're looking for the current topicId you can just use Session.get('topicId'); 现在,您在其他任何地方都在寻找当前的topicId您可以使用Session.get('topicId');

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM