How to build comment system in ember.js

Question

I am fairly a newbie to ember.js. I currently working on a school project which is essentially a message board (forum) application that allows users to add posts with comments.

My application contains three models: courses, messages, comments

course->hasMany->messages->hasMany->comments

So far I have been able to view all the courses and related messages using filter query to my server. Adding new messages works fine also except that it is not updating the new message added to the screen.

Problem: It is only when I refresh the page the new message I added is displayed.

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

Here is my message controller:

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

});

My html part:

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

Answer 1

Turns out when you use findQuery (which I believe is the same as using find with query parameters), Ember does not return a live updating array, whereas it does for a straight up find/findAll. See this question on that exact issue that I asked a while back.

The solution here (adapted from kingpin2k's answer to said question) is to use filter to trick Ember into auto-updating:

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