0

基本的に、削除アクションに視覚化を追加しようとしています。

そして、コードは次を使用しています：

    {{#each wrappedRecords as |record|}}
        {{#fade-element}}
                {{record.name}}
                <span class="remove" {{action "removeRecord" record}}></span>
            </span>
        {{/fade-element}}
    {{/each}}

そのため、removeRecord アクションがトリガーされ、レコードがWrappedRecordsから削除されます。

そして今、フェード要素コンポーネントのラッパーに。willDestroyElementコンポーネントの破棄をフックでキャッチします。

export default Ember.Component.extend({
       willDestroyElement : function () {
            var clone = this.$().clone();
            clone.insertAfter(this.$());
            clone.fadeOut();
        },
});

ただし、次を置き換えると機能しません。

clone.insertAfter(this.$());とclone.insertAfter(this.$().parent());

それは機能しますが、新しい問題が発生します。例えば：

2つのアイテムがあり、最初のアイテムを削除しようとすると、次のようになります

X1 (削除する) X2 (2 番目の要素) X1 (親に追加されたクローン)

ライブデモへのリンク

https://ember-twiddle.com/ef8c4bcdcd8d2eb5b5c4?openFiles=fade-element.component.js%2Cfade-element.template.hbs

4

1 に答える 1

1

だから2つのこと：

  1. 親には X2 が含まれているため、当然、親の後に要素を挿入しても機能しません。
  2. ビューは取り壊されようとしているので使用できず、親ビューは再レンダリングされるため、要素をその中に配置して保持することは期待できません。

解決策は

  1. Ember.run.schedule('afterRender', ...) を使用して再レンダリングが行われるまで待ちます。Ember Run Loop の詳細については、https: //guides.emberjs.com/v2.4.0/applications/run-loop/ を参照してください。
  2. クローンを配置できる場所がわかるように、前の要素への参照を保存します。

twiddle としてのソリューションについては、https: //ember-twiddle.com/966c8c6d364e0f631c0b?openFiles=fade-element.component.js%2Cfade-element.template.hbs を参照してください。

于 2016-03-08T14:27:06.223 に答える