Skip to content

Instantly share code, notes, and snippets.

@runspired
Last active March 3, 2023 23:09
Show Gist options
  • Save runspired/0fc79e6a2a22db4e429a72f86d7b8f4d to your computer and use it in GitHub Desktop.
Save runspired/0fc79e6a2a22db4e429a72f86d7b8f4d to your computer and use it in GitHub Desktop.
UUID createRecord Example
import Controller from '@ember/controller';
import { recordIdentifierFor } from '@ember-data/store';
import { inject as service } from '@ember/service';
export default class ApplicationController extends Controller {
@service store;
twiddles = this.store.peekAll('twiddle')
}
import Model, { attr } from '@ember-data/model';
export default class extends Model {
@attr name;
}
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('new');
this.route('single', { path: ':id' });
});
export default Router;
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { recordIdentifierFor } from '@ember-data/store';
export default class extends Route {
@service router;
@service store;
beforeModel() {
const record = this.store.createRecord('twiddle');
const identifier = recordIdentifierFor(record);
record.id = identifier.lid;
this.router.transitionTo('single', record.id);
}
}
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
export default class extends Route {
@service store;
model(params) {
const record = this.store.peekRecord('twiddle', params.id);
return record;
}
}
<h1>Welcome to Twiddles</h1>
<br>
<ul>
{{#each this.twiddles as |twiddle|}}
<li>
<LinkTo
@routeN="single"
@model={{twiddle.id}}
>{{twiddle.name}}</LinkTo>
</li>
{{else}}
<p>
No Twiddles Yet:
<LinkTo @route="new">Create one?</LinkTo>
</p>
{{/each}}
{{#if this.twiddles.length}}
<li><LinkTo @route="new">Create A Twiddle</LinkTo></li>
{{/if}}
</ul>
<br>
{{outlet}}
<br>
<br>
<h2>Twiddle ID {{@model.id}}</h2>
Name: <Input @value={{@model.name}}/>
{
"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