为什么这个Ember.TextArea没有绑定到控制器内容？

Question

在我的index.html，我有以下模板

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

我的邮件模型看起来像这样

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

我的邮件视图和控制器看起来像这样

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

我可以看到在console.log中，每次更新时都会将另一个模型对象添加到内容中，但文本区域未更新

这里是的jsfiddle网址http://jsfiddle.net/eDfKJ/

预先感谢您

Answer 1

我会做的反而是有结合的内容和返回的所有消息的集合的一系列一个计算属性，我将绑定textarea。

喜欢的东西：

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

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

    return messages; 

}.property('content.@each') 

，并在您的模板：

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

Answer 2

它采取了共同努力来自@ShaiRez和@ sly7_7所以我想在这里包括最后的工作液

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

ChatApp.messagesController = Ember.ArrayController.create({ 
    content: [], 
    text: '', 
    sendMessage: function() { 
    var x = this.get('text'); 
    socket.emit('sendchat', x); 
    },  
    updateChat: function(username, text) { 
    var controller = this; 
    var newMessage = ChatApp.Message.create({ message: text }); 
    controller.content.pushObject(newMessage); 
    }, 
    messages: function() { 
    var content = this.get('content'); 
    var messages = ""; 
    for(i = 0; i < content.length; i++) {                                    
     messages += content[i].message                                     
     messages += '\n'; 
    } 
    return messages; 
    }.property('content.@each') 
    });