javascript - 添加到 CollectionView 内容后，第 1 行出现 Ember 错误

Question

使用 Ember js，我有一个基于树的 View 结构，每个 View 都有一个文本框。在任何框中输入文本并按“回车”键应该会向该 View 添加“回复”；也就是说，添加另一个 View ，通过 <ul> 缩进，位于原始 View 下方。

问题是，当我按“enter”键时，ember 只是崩溃，并在 ember.js 脚本的第 1 行出现错误。知道问题可能是什么吗？

JS fiddle 在这里:http://jsfiddle.net/TcgJB/1/

Answer 1

好的，我想已经修复了你的 fiddle :http://jsfiddle.net/Sly7/hVdab/

我认为主要问题在于

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: []}));
  },
});

当您要声明一个类时，如果它拥有一个数组子级，则必须将其声明为 null，然后在创建时将其初始化为 []。这是从 ember 开始时常见的问题。事实上，底层行为是 Bap.Reply 的所有实例将共享相同的子数组。

因此，当您将一些 child 添加到第一个 child 中时，这可能会导致糟糕的结构，因为所有 child 都有相同的 parent ，一些 child 与他们的 sibling 有相同的 child ，等等......我想在那之后，Ember当它想要更新绑定(bind)并渲染 View 时丢失，因此您会遇到意外且奇怪的错误。

顺便说一句，我修正了一些小错别字，因为类应该采用驼峰式大小写，以尊重 Ember 命名约定。

这里有两个有用的链接，详细介绍:

• Ember gotchas, 6th paragraph
• About naming conventions