如何在ember.js中构建评论系统

我是ember.js的新手。我目前在一个学校的项目，这本质上是一个留言板(论坛)应用程序，允许用户添加与评论的帖子。

我的应用程序包含三个模型:课程，消息，评论

课程-> hasMany ->消息-> hasMany——>评论>

目前为止，我已经能够使用过滤器查询到我的服务器查看所有的课程和相关消息。除了不更新添加到屏幕上的新消息外，添加新消息也可以正常工作。

问题:只有当我刷新页面时才显示我添加的新消息

App.Router.map(function() {
    this.resource('home', { path : '/'}, function() {
        this.resource('mycourse', { path : ':course_id' } );
    });
});
App.MycourseRoute = Ember.Route.extend({
    model: function(params) {
        // the model for this route is a new empty Ember.Object
        var string = '{"filters":[{"name":"courseid","op":"eq","val":'+params.course_id+'}]}'
        return this.store.find('message', { q: string });
    }
 });
App.HomeRoute = Ember.Route.extend(
{
    model: function() {
        return this.store.find('course');
    }
});

这是我的消息控制器:

App.MycourseController = Ember.ArrayController.extend({
        actions: {
                addMessage: function(messageText) {
                        var message = messageText;
                        var messageAdd =this.store.createRecord('message', {
                                message: message,
                                posttime: "12:00pm",
                                courseid: 4,
                                userid: 1
                        });
                        messageAdd.save();
                }
        }
});

我的html部分:

 <script type="text/x-handlebars" id="home">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            {{#each}}
            <li>{{#link-to 'mycourse' this.id}}{{name}}{{/link-to}}</li>
            {{/each}}
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">Subscribed Courses:</h1>
        {{outlet}}
        </div>
      </div>
 </script>
 <script type="text/x-handlebars" id="mycourse">
        <button class="btn btn-default" type="button" id="create-message" {{action "addMessage" messageTxt}}>
        Post!
        </button>
      {{input type="text" value=messageTxt}}
      <br><br>
      {{#each}}
        <b>{{message}}</b>
        <li>{{posttime}}</li>
        <li>User name: {{user.username}}</li>
        <li>Course name: {{course.alt_name}}</li>
        <h4>Comments:</h4>
        {{#each comments}}
          <li>{{comment}}</li>
        {{/each}}
        <br>
      {{/each}}
 </script>

App.MycourseRoute = Ember.Route.extend({
    model: function(params) {
        // the model for this route is a new empty Ember.Object
        var string = '{"filters":[{"name":"courseid","op":"eq","val":'+params.course_id+'}]}'
        return this.store.find('message', { q: string });
    },
    setupController:function(controller, model){
      var filter = this.store.filter('color', function(color){
        return model.contains(color);
      }); 
      this._super(controller, filter);
    }
});