Skip to content

Instantly share code, notes, and snippets.

@lifeart
Last active October 25, 2020 09:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lifeart/1d9ac0ddf31c4d22381877ee31ada2c2 to your computer and use it in GitHub Desktop.
Save lifeart/1d9ac0ddf31c4d22381877ee31ada2c2 to your computer and use it in GitHub Desktop.
New Twiddle
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
@tracked
fragment = null;
@tracked
items = new Array(1000).fill(null).map((el,index)=>{
return {
time: Date.now(),
id: index
};
});
@action createRef(node) {
this.node = node;
let t = Date.now();
this.fragment = document.createDocumentFragment();
setTimeout(()=>{
this.appendFragment();
setTimeout(()=>{
console.log(Date.now()-t);
});
}, 20);
}
@action appendFragment() {
this.node.appendChild(this.fragment);
}
@action swapItems() {
let item1 = this.items[1];
let item2 = this.items[4];
this.items[1] = item2;
this.items[4] = item1;
this.items = this.items;
}
@action onSelect() {}
@action onRemove() {}
}
<button type="button" {{on "click" this.swapItems}}>Swap</button>
<table {{did-insert this.createRef}}></table>
{{#if this.fragment}}
{{#-in-element this.fragment}}
<tbody>
{{#each this.items key="id" as |item|}}<tr class={{if item "danger"}}><td class="col-md-1">{{item.time}}</td><td class="col-md-4"><a {{on 'click' this.onSelect}}>{{item.id}}</a></td><td class="col-md-1"><a {{on 'click' this.onRemove}}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>{{/each}}
</tbody>
{{/-in-element}}
{{/if}}
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0",
"@ember/render-modifiers": "1.0.2",
"ember-ref-bucket": "1.2.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment