【meteor】【チャットツール】コメントを送信した時のコメント表示順と表示位置を指定したい

動作環境

PC：Mac
フレームワーク：Meteor
データベース：MongoDB

やりたいこと

現状の挙動は、コメントを送信した際に、
コメントが表示されるdivの上から下に送信したコメントが増えていくのですが、
理想としては、slackのように
コメントを送信したら、コメントを送信するフォームの上に最新のコメントが
表示されるようにしたいです。

参考キャプチャ

あああが最古で、
おうおうおうおうおうおうおうおうおが最新のコメントです。

これの表示位置を、

にしたいのです。

課題

考えとしましては、
HTMLのdiv内に表示されるコメントの順を上からではなく、
下からsort順にしたら良いかもしれないと思ったのですが、
自分の考えは合っているのか、書き方が分からない...

といった状況です。

みなさまの知見を、ご教授いただけると幸いです。
よろしくお願いいたします。

以下にjQueryとHTMLのソースを添付いたします。

ソース

body.js
1/* コメント投稿 */
2Template.body.helpers({
3    comments() {
4
5        return Comments.find({}, { sort: { createdAt: -1 }});
6    },
7});
8
9Template.body.events({
10    'submit form'(event) {
11        event.preventDefault();
12
13        var moment = require("moment");
14        const comment = $('.post-comment').val();
15        const tag = comment.match(/Q\./) ? 'question' : '';
16
17        // Insert a comment into the collection
18        if (comment.length > 0) {
19          Comments.insert({
20              comment,
21              tag,
22              createdAt: moment.utc("YYYY/MM/DD HH:mm:ss").add("HH",9).format(), // current time
23          });
24          // Clear form
25          $('.post-comment').val('');
26          console.log(comment);
27
28        }
29    },
30});

body.html
1<body>
2    <div class="wrapper">
3        <div class="info-area">
4          <span class="header">#chat-app</span>
5          <span class="header-comment">- 質問あったら<strong>「Q.」</strong>をつけてね！ -</span>
6        </div>
7
8        <div class="show-comment-area">
9            {{ #each comments }}
10            {{ > comment }}
11            {{ /each }}
12        </div>
13
14        <div class="post-comment-area">
15          <form>
16              <input class="post-comment" placeholder="Message send to #chat-app" />
17              <button class="btn" type="submit" value="send">Send</button>
18          </form>
19        </div>
20    </div>
21</body>
22
23<template name="comment">
24  <section class="section-comment">
25    <p class="{{ tag }}">{{ comment }}</p>
26    <p class="text-muted small">{{ createdAt }}</p>
27  </section>
28</template>

行動規範の内容に同意します

回答1件

{{ createdAt }}の表示部分にInvalid dateと表示されているので、データベースに登録する際の
moment.utc("YYYY/MM/DD HH:mm:ss").add("HH",9).format(), // current time
のところを調べてみてはどうでしょうか。ここが正しく設定されていれば、
return Comments.find({}, { sort: { createdAt: -1 }});
でソートされると思います。

投稿2017/04/03 02:45