Ember.js itemController controller leaking variable

Question

I have an itemController that has two fields: isExpanded and newComment. The isExpanded is working great and binding to each itemController, but the newComment is somehow shared by all the instances of the itemController. And it will only share for the first time. After I submit the new comment, that textarea no longer share the same binding with other textareas, but the rest of the textareas are still mysteriously binding to the same ghost newComment. Why?

http://emberjs.jsbin.com/gojuhega/1/edit

[1]Previous question removed and isolated to this jsbin.

Answer 1

It seems when new controllers are created based on DiscussionController prototype, its properties are shallow-copied. Since your newComment is a reference type, you end up with 3 controllers all sharing a same instance. Only when you click 'Create' do individual controllers get their own instances.

One potential solution:

App.DiscussionController = Ember.Controller.extend({
  isExpanded: false,

  newComment: null,
  actions: {
    toggleExpand: function(){
      this.toggleProperty('isExpanded');
      if (!this.get("newComment")) {
        this.set("newComment", {body:""});
      }
    },
    createComment: function() {
      this.set('newComment', {
        body: ''
      });
    }
  }
});