Skip to content

Instantly share code, notes, and snippets.

@gtb104
Last active January 14, 2020 17:24
Show Gist options
  • Save gtb104/a342dd696126eb2340a2c13cb02c2ada to your computer and use it in GitHub Desktop.
Save gtb104/a342dd696126eb2340a2c13cb02c2ada to your computer and use it in GitHub Desktop.
ember-sortable bug
import Controller from '@ember/controller';
import { later } from '@ember/runloop';
export default Controller.extend({
appName: 'Bug ember-sortable',
columns: [
{ title: 'AAAAA' },
{ title: 'BBBBB' },
{ title: 'CCCCC' },
{ title: 'DDDDD' },
{ title: 'EEEEE' }
],
// didInsertElement() {
// this._super(...arguments);
// later(this, this.addData, 5000);
// },
// addData() {
// this.set('columns', []);
// },
actions: {
reorderColumns(newOrder) {
this.set('columns', newOrder);
},
removeFromColumns(meta) {
const newList = this.columns.filter((d) => d.title !== meta.title);
this.set('columns', newList);
},
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.thumb {
display: inline-block;
position: absolute;
right: 0;
width: 2rem;
text-align: center;
cursor: pointer;
}
li {
display: block;
background-color: lightgrey;
width: 10rem;
position: relative;
}
li:hover {
background-color: lightblue;
}
<h1>{{appName}}</h1>
The list
<br>
{{#if columns}}
{{#sortable-group tagName='ul' model=columns onChange=(action 'reorderColumns') as |group|}}
{{#each group.model as |column|}}
{{#group.item class='editable' model=column as |columnItem|}}
<button class='remove-key' {{action 'removeFromColumns' column}}>x</button>
<span title={{column.title}} class='title'>{{column.title}}</span>
{{#columnItem.handle class='thumb'}}⇕{{/columnItem.handle}}
{{/group.item}}
{{/each}}
{{/sortable-group}}
{{else}}
Fetching data....
{{/if}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-sortable": "2.1.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment