当Ember和Dragula都认为他们拥有DOM及其当前的代表时,我怎么能让他们玩得很好?我已经尝试取消了draggle drop事件,然后让Ember设置了有限的成功值.
DND-包装/ template.hbs
{{yield (action "register")}}
DND-包装/ 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-桶/ template.hbs
<h2>bucket {{value}}</h2> <ul> {{#each filteredItems as |item|}} {{dnd-item item=item register=register}} {{/each}} </ul>
DND-桶/ 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项/ template.hbs
{{item.title}}
DND项/ component.js
export default Ember.Component.extend({ registerWithWrapper: Ember.on('didInsertElement',function() { this.register('item',element: this.$()[0] }); }) });
在线演示:http://ember-twiddle.com/c086d2853a926c310a23
GitHub演示:https://github.com/RyanHirsch/dragula-ember-example
解决方法
不幸的是,我不得不使用蛮力来重新渲染工作,在任何父视图上调用rerender都不起作用. Ember认为从DOM中消失的项目仍然存在并且正确呈现.
我最终使用{{#if listVisible}} {{/ if}}将dbI-bucket模板中的filteredItems列表包装起来.如果你然后设置itemsVisible false和true它会强制列表重新渲染并修复DOM损坏.我还必须确保这些集合在runloop中渲染之前和之后.
resetView: function() { Ember.run.scheduleOnce('render',this,() => { this.set("listVisible",false); }); Ember.run.scheduleOnce('afterRender',true); }); }
在我的情况下,我在更新drop回调中的模型后触发了resetView.虽然这个修复很麻烦,但视觉效果是可以接受的.如果DOM元素确实消失了,它们就会被替换掉,这有点不和谐.但是,99.9%的时间没有丢失DOM元素,根本没有视觉故障.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。