Ember 2.0.1 でネストされたコンポーネントを実装しようとしていますtoggleProperty
が、アクション ハンドラー内で関数を使用すると、奇妙な動作が発生します。
最初のコンポーネントは次のようになります。
// ./components/comp-1.js
import Ember from 'ember';
export default Ember.Component.extend({
prop1: false,
hello: "Default text of comp-1",
_changeHello: function() {
this.set('hello', 'Text set by comp-1');
}.on("init"),
actions: {
customAction1() {
this.toggleProperty('prop1');
}
}
});
.
// ./templates/components/comp-1.hbs
<button {{action 'customAction1'}}>{{hello}}</button>
2 つ目は次のとおりです。
// ./components/comp-2.js
import Ember from 'ember';
export default Ember.Component.extend({
data: [],
_doSomeImportentStuff: function() {
var data = this.get('data');
data = [{name: 'Text set by comp-2', bool: false},
{name: 'Text set by comp-2', bool: true}];
this.set('data', data);
}.on("init")
});
.
// ./templates/components/comp-2.hbs
{{#each data as |d|}}
{{comp-1 hello=d.name prop1=d.bool}}
{{/each}}
このコンポーネントは、comp- 1によって設定された Text というcomp-2
名前の 2 つのボタンを作成します。ボタンをクリックすると、アクション ハンドラで呼び出される関数が実行されるため、テキストがcomp- 2によって設定されたテキストに変わります。この関数を削除するか、fromの設定を削除すると、すべてが期待どおりに機能します。つまり、ボタンのテキストは常にcomp- 1で設定されたテキストのままになります。this.toggleProperty('prop1')
customAction1
prop1
./templates/components/comp-2.hbs
toggleProperty
関数が他のプロパティを元に戻すのはなぜですか?
私は何か間違ったことをしていますか?
実際の動作はこちらで確認できます: http://ember-twiddle.com/90798b4952deb4a83de1