1

initライフサイクル フックでコンポーネントの 1 つにデフォルト値を割り当てようとしています。親コンポーネントから未定義の値が渡された場合。最初は、すべてが期待どおりに機能しているように見えます。ただし、コンポーネントが再レンダリングを強制された場合 (おそらく親コンポーネントでの別のプロパティ値の更新を介して); 親コンポーネントの未定義の値がコンポーネントに書き戻されます。

これの意味は; 初期化時に行った値の割り当てが親コンポーネントに反映されていない、つまり双方向バインディングが一時的に機能していません (親コンポーネントと子コンポーネントの値が同期されていません)。それは予想される動作ですか、それともsthがありませんか。初期化イベントについて重要ですか？コンポーネントの未定義の値を初期化する適切な場所はどこですか? 簡単なイラストについては、ひねりを参照してください。

4

2 に答える 2

3

さて、最初に回避する方法は、 でupdate関数を使用することattrです。この tiddleをチェックしてください。

this.set('name', 'tom')のとthis.attrs.name.update('tom')の.jsを{{name}}に置き換え{{attrs.name}}ました.hbs。

回避する別の方法は、割り当てを I've done here のようにラップするEmber.run.laterことですthis.set('name', 'tom')。

Ember.run.later(() => {
  this.set('name', 'tom');
});

それが回避策です。

init でバインドが完全に設定されていないという事実には、長い歴史があります。しかし、一般的には、子コンポーネントの値を初期化し、この値を親に渡すアンチ パターンです。これはコードの可読性を低下させ、DDAU (データダウン、アクションアップ) の原則に反します。

コンポーネントの評価サイクル中に暗黙的にではなく、モデルを作成するときにデータを明示的に初期化することをお勧めします。

保存したくないデフォルト値については、計算されたプロパティを記述することをお勧めします。

nameWithDefault: computed('name', {
    get() {
        return get(this, 'name') || 'tom';
    },
    set(key, val) {
        set(this, 'name', val);
    }
})

これは明示的であり、コンポーネントが表示された後にデータを書き留めておらず、ユーザーのために機能します。

于 2016-05-17T14:17:14.153 に答える
0

Lux の解決策に同意しますが、何か他のことを試したい場合は、子コンポーネントで、名前をチェックする計算プロパティを追加するか、別の文字列にデフォルト設定することができます。これにより、子テンプレートごとに異なる既定値を設定できます (同じnameプロパティを使用する子コンポーネントが異なる場合)。

child-component.js

export default Ember.Component.extend({
  child_name: Ember.computed('name', function() {
    return this.get('name') || 'tom';
  }),
});

子コンポーネント.hbs

{{child_name}}
<br>
{{surname}}
于 2016-05-20T14:29:14.263 に答える