Simple DnD

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  items: Ember.computed(function() {
    return [
      Ember.Object.create({ title: 'Foo', bucket: 'first' }),
      Ember.Object.create({ title: 'Bar', bucket: 'first' }),
      Ember.Object.create({ title: 'Baz', bucket: 'first' }),
      Ember.Object.create({ title: 'Quxx', bucket: 'first' })
     ];
  })
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<p>
If you drag Baz and Bar above Foo, then drag Foo into the second bucket, Baz and Bar disappear from the first bucket.
</p>
<p>
As far as I can tell this is from Dragula and Ember both thinking they know the 'truth of the world'. As can be demonstrated by removing the dependent key from filteredItems in dnd-bucket/component.js
</p>
<p>
Is there a way to get this to work so that both drag and drop work and some direct .set to the item's bucket value cause it to behave as expected?
<br/>
<br/>
<a href="https://github.com/RyanHirsch/dragula-ember-example">https://github.com/RyanHirsch/dragula-ember-example</a>
</p>
<table>
{{#each items as |item|}}
<tr>
	<td>{{item.title}}</td>
  <td>{{item.bucket}}</td>
</tr>
{{/each}}
</table>
<hr>
{{#dnd-wrapper as |register|}}
	{{dnd-bucket items=items value="first" register=register}}
	{{dnd-bucket items=items value="second" register=register}}
{{/dnd-wrapper}}

dnd-bucket.component.js

import Ember from 'ember';

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

dnd-bucket.template.hbs

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

dnd-item.component.js

import Ember from 'ember';

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

dnd-item.template.hbs

{{item.title}}

dnd-wrapper.component.js

import Ember from 'ember';

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);
     
      console.log({dest});
      console.log({source});
      console.log({item});
      
      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-wrapper.template.hbs

{{yield (action "register")}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul {
  background: #EEE;
  min-height: .5rem;
}

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js",
    "dragula-css": "https://cdnjs.cloudflare.com/ajax/libs/dragula/3.3.0/dragula.min.css",
    "dragula": "https://cdnjs.cloudflare.com/ajax/libs/dragula/3.3.0/dragula.min.js"
  }
}