使用 Ember js,我得到了一个基于树的视图结构,每个视图都有一个文本框。在任何框中输入文本并点击“输入”应该会向该视图添加“回复”;也就是说<ul>
,在原始视图下方添加另一个视图,通过 缩进。
问题是,当我点击“输入”时,ember 会在 ember.js 脚本的第 1 行出现错误并崩溃。任何想法可能是什么问题?
JS 小提琴在这里:http: //jsfiddle.net/TcgJB/1/
使用 Ember js,我得到了一个基于树的视图结构,每个视图都有一个文本框。在任何框中输入文本并点击“输入”应该会向该视图添加“回复”;也就是说<ul>
,在原始视图下方添加另一个视图,通过 缩进。
问题是,当我点击“输入”时,ember 会在 ember.js 脚本的第 1 行出现错误并崩溃。任何想法可能是什么问题?
JS 小提琴在这里:http: //jsfiddle.net/TcgJB/1/
好的,我想已经修好了你的小提琴: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: []}));
},
});
当你要声明一个类时,如果它拥有一个数组child,你必须将它声明为null,然后[]
在创建时初始化它。这是从 ember 开始时的常见问题。事实上,潜在的行为是所有的实例都Bap.Reply
将共享相同的子数组。
所以当你将一些孩子添加到第一个中时,这可能会导致一个糟糕的结构,因为所有孩子都有相同的父母,有些孩子和他们的兄弟姐妹有相同的孩子等等......我认为在那之后,Ember 会丢失它想要更新绑定并渲染视图,因此您会遇到意外和奇怪的错误。
顺便说一句,为了尊重 Ember 命名约定,我已经修正了一些小错误,因为类应该是驼峰式的。
这是两个有用的链接,详细说明: