Step 7: On the detail page, users can post comments about a webpage, and they are displayed below the description of the webpage.

client/client.js

@@ -15,7 +15,6 @@ Router.route("/", function () {
 });
 
 Router.route("/site/:id", function () {
-  console.log(this.parms);
   const id = this.params.id;
   const doc = _.extend({ onPage: true }, Websites.findOne({ _id: id }));
   this.render("page_site", {
@@ -24,7 +23,4 @@ Router.route("/site/:id", function () {
       return doc;
     }
   });
-  this.render("comments", {
-    to: "comments"
-  });
 });

client/comments.html

@@ -0,0 +1,37 @@
+<template name="comments">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      Comments
+    </div>
+
+    <div class="panel-body list-group">
+      <div class="list-group-item  row">
+        <div class="col-md-2 list-group-item-heading">Poster</div>
+        <div class="col-md-10 list-group-item-heading">Comment</div>
+      </div>
+      {{#each comments }}
+        <div class="list-group-item list-group-item-text row">
+          <div class="col-md-2">{{ poster.name }}</div>
+          <div class="col-md-10">{{ contents }}</div>
+        </div>
+      {{/each}}
+    </div>
+
+    <div class="panel-footer">
+      {{#if isLoggedIn }}
+        <form class="js-comment-submit">
+          <div class="input-group">
+            <input type="text" id="comment-input" class="form-control" placeholder="Remember to stay on-topic." />
+            <span class="input-group-btn">
+              <button type="submit" id="comment-submit" class="btn btn-primary">Submit comment</button>
+            </span>
+          </div>
+        </form>
+      {{else}}
+        <span class="badge btn-danger">
+          You need to be logged in to post comments.
+        </span>
+      {{/if}}
+    </div>
+  </div>
+</template>

client/comments.js

@@ -0,0 +1,26 @@
+/**
+ * Client code for the comments template.
+ *
+ * - events
+ */
+Template.comments.events({
+  "submit .js-comment-submit": function (event, template) {
+    const contents = event.target["comment-input"].value;
+    const user = Meteor.user();
+    const comment = {
+      poster: {
+        _id: user._id,
+        name: user.username
+      },
+      contents: contents
+    };
+    const modifier = {
+      $push: {
+        comments: comment
+      }
+    };
+    console.log(modifier);
+    Websites.update({ _id: this._id }, modifier);
+    return false;
+  }
+});

client/page_site.html

@@ -6,4 +6,6 @@
   <ul class="list-group">
     {{> website_item }}
   </ul>
+
+  {{> comments }}
 </template>

server/collections.js

@@ -68,8 +68,9 @@ Websites.allow({
     const orderedFields = fields.sort();
     if (!_.isEqual(orderedFields, ["minus", "minusScore"]) &&
       !_.isEqual(orderedFields, ["plus", "plusScore"]) &&
-      !_.isEqual(orderedFields, ["minus", "minusScore", "plus", "plusScore"])) {
-      throw new Meteor.Error("invalid-field", "May only update minus[Score] and plus[Score].");
+      !_.isEqual(orderedFields, ["minus", "minusScore", "plus", "plusScore"]) &&
+      !_.isEqual(orderedFields, ["comments"])) {
+      throw new Meteor.Error("invalid-field", "May only update minus[Score] and plus[Score] or comments.");
     }
 
     // FIXME : check modifier.