2015-12-06 77 views
0

我想將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); 
    } 
    } 
}); 

回答

0

一種方式(還有許多)是使用一個會話變量來跟蹤當前主題。在您的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');

+0

不過順便說一下,有你的代碼是許多其他問題不僅僅是共享狀態然而,單選按鈕。例如,您如何發佈「評論」。你的發佈函數將需要'topicId',你根本不需要這個方法調用。 –