ここで明らかな何かが欠けているに違いないと確信しています。それぞれ ArrayController に設定されたプロパティを持つ 3 つのオブジェクトを作成しています。新しいオブジェクトを追加するたびに、ArrayController インスタンスは一意のインスタンスではなく、以前のコントローラーのコンテンツを共有します。
私の例では、これを修正できる唯一の方法はthis.set('content', []);
、ArrayController の init メソッドで行うことです。
ここで明らかな何かが欠けているに違いないと確信しています。それぞれ ArrayController に設定されたプロパティを持つ 3 つのオブジェクトを作成しています。新しいオブジェクトを追加するたびに、ArrayController インスタンスは一意のインスタンスではなく、以前のコントローラーのコンテンツを共有します。
私の例では、これを修正できる唯一の方法はthis.set('content', []);
、ArrayController の init メソッドで行うことです。
初期化(そしてよくある間違い!)
Emberの初心者にとって最も一般的な間違いの1つは、プロトタイプではなくインスタンスにプロパティを渡していると考えることです。例えば:
var Person = Ember.Object.extend({
chromosomes: ["x"] // CAREFUL !!!!!
});
var joe = Person.create();
joe.get("chromosomes").push("y");
var jane = Person.create();
jane.get("chromosomes").push("x");
// Joe and Jane are all mixed up?!?!?!?!
console.log( joe.get("chromosomes") ); // x, y, x
console.log( jane.get("chromosomes") ); // x, y, x
なぜこの染色体突然変異が起こったのですか?この問題は、Personクラスを定義するときにプロトタイプに配列を追加したときに始まりました。次に、この配列は、Personからインスタンス化された各オブジェクトと共有されました。
これをどのように処理すべきでしたか?
var Person = Ember.Object.extend({
chromosomes: null,
init: function() {
this._super();
this.chromosomes = ["x"]; // everyone gets at least one X chromosome
}
});
var joe = Person.create();
joe.get("chromosomes").push("y"); // men also get a Y chromosome
var jane = Person.create();
jane.get("chromosomes").push("x"); // women get another X chromosome
// Hurray - everyone gets their own chromosomes!
console.log( joe.get("chromosomes") ); // x, y
console.log( jane.get("chromosomes") ); // x, x
クラスでオブジェクトまたは配列を宣言するときは、通常、init()関数の各インスタンスとともにそれらを初期化する必要があります。このようにして、各オブジェクトは、オブジェクトと配列の独自のインスタンスを受け取ります。また、init()内からthis._super()を呼び出すことを忘れないでください。これにより、init()がプロトタイプチェーンの最後まで呼び出されます。
もちろん、オブジェクトや配列をインスタンス間で一定に保つことを目的としている場合は、オブジェクトや配列をプロトタイプに直接保持しても問題はありません。実際、一般的なパターンの1つは、プロトタイプのデフォルト設定を維持し、それをinit()のインスタンスごとに複製することです。これらの種類のパターンは、オブジェクトの作成方法と初期化方法を理解すれば、簡単に実装できます。
記事からコピー:http ://www.cerebris.com/blog/2012/03/06/understanding-ember-object/
実際、各インスタンスが同じ配列を共有するため、通常content: []
、ブロック内で設定することは望ましくありません。.extend({...})
私の知る限り、これは Ember.js で受け入れられる、おそらく一般的なパターンです。
App.MyController = Ember.ArrayController.extend({
content: null,
init: function() {
this._super();
this.set('content', []);
},
// ...
});