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

我对ember.js来说是个新手。我目前正在做一个学校项目，它本质上是一个留言板（论坛）应用程序，允许用户添加带有评论的帖子

我的应用程序包含三个模型：课程、消息和评论

课程->留言->留言->留言->评论

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

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

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();
                }
        }

});

 <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>

我的html部分：

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();
                }
        }

});

 <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>

{{{#各}
{{{#链接到'mycourse'this.id}{{{name}{{{/link to}}
{{/每个}}

报名课程：
{{outlet}}
邮递
{{input type=“text”value=messageTxt}



{{{#各}
{{message}}
{{posttime}}
用户名：{{User.username}
课程名称：{{Course.alt_name}
评论：
{{{#每个评论}
{{comment}}
{{/每个}}


{{/每个}}

当您使用

findQuery

（我认为这与使用带有查询参数的

find

相同）时，Ember不会返回实时更新数组，而对于直接的

find

/

findAll

，它会返回。我刚才问过你

这里的解决方案（根据作者对上述问题的回答改编）是使用

过滤器
诱使余烬自动更新：

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);
    }
});