Question

Using Ember js, I’ve got a tree-based structure of views, each of which has a text box. Entering text in any of the boxes and hitting ‘enter’ should add a ‘reply’ to that view; that is, add another view, indented via <ul>, underneath the original view.

Problem is, when I hit ‘enter’, ember just crashes with an error at line 1 of the ember.js script. Any ideas what the problem could be?

JS Fiddle here: http://jsfiddle.net/TcgJB/1/

Answer 1

Ok, I think ‘ve fixed your fiddle: http://jsfiddle.net/Sly7/hVdab/

I think the main issue was in

Bap.Reply = Ember.Object.extend({
  text: null,
  children: [], // don't do that, instead declare it as null, and create
                // an empty children at instanciation time 
  addReply: function(text) {
    this.get('children').addObject(Bap.Reply.create({text:text, content: []}));
  },
});

//or an equivalent implementation, if you want each instance to be created with a default empty array:

Bap.Reply = Ember.Object.extend({
  text: null,
  children: null,

  //overriding the init method (kind of constructor for Ember's Objects
  init(): function() {
    this._super(); // very important, don't forget it
    this.set('children', []);
  },

  addReply: function(text) {
    this.get('children').addObject(Bap.Reply.create({text:text, content: []}));
  },
});

When you want to declare a class, if it owns an array child, you must declare it as null, and then initialize it to [] at creation time. This is a common gotcha when beginning with ember. In fact, the underlying behavior is that all instances of Bap.Reply will share the same children array.

So when you add some children into the first one, this may result in a crappy structure, as all children have the same parent, some children have the same children as their siblings, etc… I think after that, Ember is lost when it wants to update the bindings and render the views, and so you encounter unexpected and weird errors.

By the way, I’ve fixed some minor typos, as class should be camel-cased, in order to respect the Ember Naming convention.

Here is two usefull links whose go into details:

• Ember gotchas, 6th paragraph
• About naming conventions