3

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')customAction1prop1./templates/components/comp-2.hbs

toggleProperty関数が他のプロパティを元に戻すのはなぜですか?

私は何か間違ったことをしていますか?

実際の動作はこちらで確認できます: http://ember-twiddle.com/90798b4952deb4a83de1

4

1 に答える 1