动态添加元素到页面顶部

问题：我有一个带有tr的表，该表具有来自表的数据，当我在Mongo中插入元素并将其发布到我的页面上时，该元素添加在表的底部

    Posts = new Mongo.Collection('posts');

    Meteor.publish('allPosts', function(){
        return Posts.find({}, { sort: { date: -1 }} );
    });

    Meteor.subscribe("allPosts");

    Posts.insert({
      date: 1
    })

    Posts.insert({
      date: 2
    })

Posts.insert({
      date: 3
    })
<table class=" table">
      {{#each posts}}
          {{> postJobs}}
      {{/each}}
</table>

<template name="postJobs">
  <tr class="smallInfo">
    <td>{{date}}</td>
  </tr>
</template>

在DOM中，我有：

    <table>
      <tr>
        <td>1</td> // must be 3
      </tr>
      <tr>
        <td>2</td> // must be 2
      </tr>
<tr>
        <td>3</td> // must be 1
      </tr>
    </table>

我最后的所有插入内容必须添加到页面顶部（表）

编辑：我的问题与集合中的动态插入（我知道-1 gramatik错误）示例：

Meteor.startup(function(){
  Meteor.setTimeout(function(){Test("10");}, 1000);
  function Test(x)
{
  Posts.insert( {
    submitDate: moment().format()
  });
}
  Meteor.setTimeout(function(){Test("10");}, 10000);

如果我按SubmitDate排序，它将显示为：

<tr><td>10-10-10</td></tr> // must be 10-10-20
<tr><td>10-10-20</td></tr> // must be 10-10-10

但是当我刷新页面时（F5）一切正常

<tr><td>10-10-20</td></tr> 
<tr><td>10-10-10</td></tr>