将模型添加到集合后，重新渲染模板

Question

I have a list of messages that are associated with a model:

App.User = DS.Model.extend({

  displayName: DS.attr('string'),
  email: DS.attr('string'),
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  location: DS.attr('string'),
  messages: DS.hasMany('message', { async: true })

});

App.Message = DS.Model.extend({

  user: DS.belongsTo('user'),
  recipient: DS.belongsTo('user'),
  createdAt: DS.attr('isodate'),
  updatedAt: DS.attr('isodate'),
  fullText: DS.attr('string'),
  subject: DS.attr('string')

});

I render a user's messages like so:

<script type="text/x-handlebars" data-template-name="profile">
    <form class="new-message navbar-form" role="search" {{action "sendMessage" on="submit"}}>
         {{textarea valueBinding="newMessageText" rows="3" placeholder="Send a Message"}}
         <button type="submit" class="btn btn-default btn-lg btn-block" style="margin-top: 10px">Submit</button>
    </form>
    {{#each message in messages}}
    <div class="message text-left">
        <div class="page-header clearfix">
            <p class="created-at">{{format-date message.createdAt}}</p>
            <img class="profile-pic" src="http://lorempixel.com/24/24/people" alt="profile" class="img-rounded">
            <p class="subject">{{message.subject}}</p>
        </div>
        <p class="full-text">{{message.fullText}}</p>
    </div>
    {{/each}}
</script>

When a new message is submitted using the form above, a new messages is added to the store and saved to the server. The problem is that the list of messages is not re-rendered to include the newly-added message when the save is performed:

App.UserController = Ember.ObjectController.extend({

  newMessageText: '',

  actions: {

    sendMessage: function() {
      var that = this;
      var message = this.get('store').createRecord('message', {
        fullText: this.newMessageText,
        recipient: this.get('model')
      });
      message.save().then(function () {
        // A new message is added to the store linked to the user, but the
        // newly-saved message is not added to the template.
        that.set('newMessageText', '');
      });
    }

  }

});

What's the proper way to ensure new messages added to the store force my template to re-render?

Answer 1

You need to use an ArrayController for the messages list, or an Ember.Array (depends on your needs). You need either of those because you want your object to be observable so that the auto-updating mechanism, that the templates use, can react to the changes.