title: How to build comment system in ember.js
body: <p>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. </p>
  
  <p>My application contains three models: courses, messages, comments</p>
  
  <p>course->hasMany->messages->hasMany->comments</p>
  
  <p>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. </p>
  
  <p><strong>Problem:</strong> It is only when I refresh the page the new message I added is displayed.</p>
  
  <pre><code>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');
      }
  });
  </code></pre>
  
  <p><strong>Here is my message controller:</strong></p>
  
  <pre><code>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();
                  }
          }
  
  });
  </code></pre>
  
  <p><strong>My html part:</strong></p>
  
  <pre><code> &lt;script type="text/x-handlebars" id="home"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-3 col-md-2 sidebar"&gt;
            &lt;ul class="nav nav-sidebar"&gt;
              {{#each}}
              &lt;li&gt;{{#link-to 'mycourse' this.id}}{{name}}{{/link-to}}&lt;/li&gt;
              {{/each}}
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"&gt;
          &lt;h1 class="page-header"&gt;Subscribed Courses:&lt;/h1&gt;
          {{outlet}}
          &lt;/div&gt;
        &lt;/div&gt;
   &lt;/script&gt;
  
   &lt;script type="text/x-handlebars" id="mycourse"&gt;
          &lt;button class="btn btn-default" type="button" id="create-message" {{action "addMessage" messageTxt}}&gt;
          Post!
          &lt;/button&gt;
        {{input type="text" value=messageTxt}}
        &lt;br&gt;&lt;br&gt;
  
        {{#each}}
          &lt;b&gt;{{message}}&lt;/b&gt;
  
          &lt;li&gt;{{posttime}}&lt;/li&gt;
          &lt;li&gt;User name: {{user.username}}&lt;/li&gt;
          &lt;li&gt;Course name: {{course.alt_name}}&lt;/li&gt;
          &lt;h4&gt;Comments:&lt;/h4&gt;
          {{#each comments}}
            &lt;li&gt;{{comment}}&lt;/li&gt;
          {{/each}}
          &lt;br&gt;
        {{/each}}
   &lt;/script&gt;
  </code></pre>