Skip to content

Instantly share code, notes, and snippets.

@runspired
Last active March 1, 2024 11:50
Show Gist options
  • Save runspired/ea7630dffc1b89fdb04fa5e18167be9e to your computer and use it in GitHub Desktop.
Save runspired/ea7630dffc1b89fdb04fa5e18167be9e to your computer and use it in GitHub Desktop.
New Twiddle
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { next } from '@ember/runloop';
const createdAt = new Date().toUTCString();
let inc = 0;
export default class ApplicationController extends Controller {
@service store;
constructor() {
super(...arguments);
this.appNameRenderCount = 0;
this.createdAtRenderCount = 0;
}
model = this.store.push({
data: {
type: 'app',
id: '1',
attributes: {
createdAt: new Date(createdAt),
appName: 'Test App'
}
}
});
get appName() {
next(() => this.incrementProperty('appNameRenderCount'));
return this.model.appName;
}
get createdAt() {
next(() => this.incrementProperty('createdAtRenderCount'));
console.log(this.model.createdAt);
return this.model.createdAt.toString();
}
updateRecord = () => {
window.dates = window.dates || [this.model.createdAt];
debugger;
this.store.push({
data: {
type: 'app',
id: '1',
attributes: {
createdAt: new Date(createdAt),
appName: 'Test App' // 'Test App:' + inc++
}
}
});
window.dates.push(this.model.createdAt);
console.log(window.dates);
}
}
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default class extends Model {
@attr('date') createdAt;
@attr('string') appName;
}
<h1>Welcome to {{this.appName}}</h1>
<br>
CreatedAt: {{this.createdAt}}<br>
AppName Renders: {{this.appNameRenderCount}}<br>
CreatedAt Renders: {{this.createdAtRenderCount}}<hr>
<button {{on "click" this.updateRecord}}>Refresh</button>
<br>
{{outlet}}
<br>
<br>
{
"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-data": "3.18.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment