Rozstrzyganie widoku Ember i Draguli na DOM

Question

Używam Draguli, aby utworzyć zestaw komponentów typu "przeciągnij i upuść" w Ember. Przekazuję listę elementów do opakowania nadrzędnego zawierającego wiele zrzucanych wiader. Ta lista elementów jest początkowo filtrowana, aby poprawić elementy są renderowane w odpowiednim segmencie. Następnie Dragula jest podłączony, aby można było przeciągać i upuszczać przedmioty. Po wystąpieniu zdarzenia upuszczania próbuję zaktualizować obiekt Ember znajdujący się pod spodem. Może to spowodować ponowne zastosowanie filtru i wygenerowanie niektórych obrazów. Problem polega na tym, że DOM został zmanipulowany przez Dragulę i nie jest tym samym, co Ember uważa, że ​​powinno być, a węzły DOM po prostu znikają.

Jak mogę sprawić, by Ember i Dragula grali ładnie, gdy oboje uważają, że są właścicielami DOM i jego obecnym przedstawieniem? Próbowałem anulować zdarzenie upuszczania draggle, a następnie pozwolić Ember ustawić wartości z ograniczonym powodzeniem.

dnd-wrapper/template.hbs

{{yield (action "register")}} 

dnd-wrapper/component.js

export default Ember.Component.extend({ 
    drake: null, 
    buckets: [], 
    items: [], 
    initDragula: Ember.on('willInsertElement', function() { 
    this.set('drake', window.dragula()); 
    }), 
    setupDragulaEvents: Ember.on('didInsertElement', function() { 
    this.get('drake').on('drop', (itemEl, destinationEl, sourceEl) => { 
     let dest = this.buckets.findBy('element', destinationEl); 
     let source = this.buckets.findBy('element', sourceEl); 
     let item = this.items.findBy('element', itemEl); 

     item.component.set('item.bucket', dest.component.get('value')); 
    }); 
    }), 
    actions: { 
    register(type, obj) { 
     if(type === 'bucket') { 
     this.get('drake').containers.push(obj.element); 
     this.buckets.pushObject(obj); 
     } 
     else { 
     this.items.pushObject(obj); 
     } 
    } 
    } 
}); 

dnd-bucket/template.hbs

<h2>bucket {{value}}</h2> 
<ul> 
    {{#each filteredItems as |item|}} 
    {{dnd-item item=item register=register}} 
    {{/each}} 
</ul> 

dnd-bucket/component.js

export default Ember.Component.extend({ 
    items: null, 
    registerWithWrapper: Ember.on('didInsertElement', function() { 
    this.register('bucket', { 
     component: this, 
     element: this.$('ul')[0] 
    }); 
    }), 
    filteredItems: Ember.computed('items.@each.bucket', function() { 
    return this.get('items').filterBy('bucket', this.get('value')); 
    }) 
}); 

dnd-item/template.hbs

{{item.title}} 

dnd-item/component.js

export default Ember.Component.extend({ 
    registerWithWrapper: Ember.on('didInsertElement', function() { 
    this.register('item', { 
     component: this, 
     element: this.$()[0] 
    }); 
    }) 
}); 

Demo online: http://ember-twiddle.com/c086d2853a926c310a23

GitHub Demo: https://github.com/RyanHirsch/dragula-ember-example

Answer 1

wpadłem na dokładnie tym samym problemem jesteś opisujące. Spędziłem godziny próbując różnych rzeczy, aby to naprawić, i myślę, że w końcu wymyśliłem hacky, ale wykonalne rozwiązanie. Mięsem tego jest to, że musiałem wymusić wiadro "źródła", aby ponownie wydać swoje przedmioty po wywołaniu zdarzenia drop.

Niestety, musiałem użyć brutalnej siły, aby ponownie wysłać do pracy, wywoływanie reedycji na żadnym z widoków nadrzędnych nie działało. Ember uważa, że ​​przedmiot (y), które zniknęły z DOM, nadal istnieją i są prawidłowo renderowane.

Zakończyłem zawijanie listy filtersItems w szablonie dnd-bucket z {{#if listVisible}}{{/if}}. Jeśli następnie ustawisz itemVisible false i true, wymusza to na liście, aby ponownie wygenerować i naprawić obrażenia DOM. Musiałem również upewnić się, że te zestawy były przed i po renderowaniu w pętli.

resetView: function() { 
    Ember.run.scheduleOnce('render', this,() => { 
    this.set("listVisible", false); 
    }); 
    Ember.run.scheduleOnce('afterRender', this,() => { 
    this.set("listVisible", true); 
    }); 
} 

W moim przypadku uruchomiłem resetView po zaktualizowaniu modeli wywołania zwrotnego drop. Chociaż ta poprawka jest odstraszająca, efekt wizualny jest akceptowalny. Jeśli elementy DOM zniknęły, zostały zastąpione, co jest trochę drażniące. Ale przez 99,9% czasu, gdy nie zniknęły elementy DOM, nie ma żadnych wizualnych usterki.