链接MongoDB集合

我想将Meteor教程应用程序simple-todo转换为论坛。我有一个使用删除按钮和单选按钮填充主题的列表。链接MongoDB集合

我想要做的是当主题的单选按钮被选中时，显示与它相关的所有评论。我试图通过将教程中使用的topicId（原来的taskId）放在一个名为Comments的新集合中来实现这一点。然后，我查询该topicId的评论。评论大多是复制和粘贴主题，因此两者的属性和功能大多相同。

我现在不知道如何从我的Template.body.events转到topicId。如果你能帮我把这两个数据库绑在一起，那会很有帮助。

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：

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); 
    } 
    } 
});

来源

2015-12-06 zgangwer20

一种方式（还有许多）是使用一个会话变量来跟踪当前主题。在您的topic事件处理程序：

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

现在在其他地方你要找当前topicId你可以只使用Session.get('topicId');

来源

2015-12-06 06:02:54

不过顺便说一下，有你的代码是许多其他问题不仅仅是共享状态然而，单选按钮。例如，您如何发布“评论”。你的发布函数将需要'topicId'，你根本不需要这个方法调用。 –

链接MongoDB集合

回答

相关问题