Question

In my index.html I have the following template

<script type="text/x-handlebars">
    {{#with ChatApp.messagesController}}
      {{view Ember.TextArea valueBinding="content.message" rows="12" cols="70"}}
    {{/with}}
  </script>

My messages model looks like this

ChatApp.Message = Ember.Object.extend({
  message: null
});

My messages view and controller look like this

ChatApp.messagesView = Ember.View.extend({});

ChatApp.messagesController = Ember.ArrayController.create({                                                                                           
  content: [],
  text: '',
  sendMessage: function() {
    var newChatText = this.get('text');
    socket.emit('sendchat', newChatText);
  },
  updateChat: function(username, text) {
    var controller = this;
    var content = this.get('content');
    var newMessage = ChatApp.Message.create({ message: text });

    content.push(newMessage);
    console.log("update " + controller.get('content'));
    controller.set('content', content);
  }
});

I can see in the console.log that with each update another model object is being added to the content, yet the text area isn’t being updated

Here is the jsFiddle url http://jsfiddle.net/eDfKJ/

Thank you in advance

Answer 1

What I would do instead is to have a computed property which binds to the content and returns an aggregated string of all the messages, and I would bind the textarea to that.

Something like:

messages: function() {
    var content = this.get('content');
    var messages = "";

    ... loop the content and combine the messages string... 

    return messages;

}.property('content.@each')

and in your template:

  <script type="text/x-handlebars">
    {{#with ChatApp.messagesController}}
      {{view Ember.TextArea valueBinding="content.messages" rows="12" cols="70"}}
    {{/with}}
  </script>