Skip to content

Instantly share code, notes, and snippets.

@jelhan
Last active December 11, 2020 12:01
Show Gist options
  • Save jelhan/6922d090486ee090a12396516469f685 to your computer and use it in GitHub Desktop.
Save jelhan/6922d090486ee090a12396516469f685 to your computer and use it in GitHub Desktop.
ember-data with different attribute naming styles
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
@service intl;
@action changeLocaleToGerman() {
this.intl.locale = 'de-DE';
}
}
import Collection from 'ember-cli-mirage/orm/collection';
export default function() {
this.get('/modules', {
data: [
{
type: "modules",
id: "1",
attributes: {
name: "foo",
readOnly: true,
"badges_en-US": [
"first",
"second"
],
"badges_de-DE": [
"erstes",
"zweites"
]
}
}
]
});
};
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { inject as service } from '@ember/service';
export default class extends Model {
@service intl;
// the following lines will be autogenerated by
// @localizedAttr badge;
@attr 'badges_de-DE';
@attr 'badges_en-US';
get badges() {
const { locale } = this.intl;
return this[`badges_${locale}`];
}
// some other attributes
@attr name;
@attr readOnly;
}
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return this.store.findAll('module');
}
});
import JSONAPISerializer from '@ember-data/serializer/json-api';
export default class ApplicationSerializer extends JSONAPISerializer {
keyForAttribute(key) { return key; }
}
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
export default Service.extend({
@tracked locale: 'en-US',
});
<h1>Welcome to {{this.appName}}</h1>
<button {{on "click" this.changeLocaleToGerman}}>German please</button>
Current locale: {{this.intl.locale}}
{{#each @model as |module|}}
<h1>{{module.name}}</h1>
<p>Is readonly? {{module.readOnly}}</p>
<ul>
{{#each module.badges as |badge|}}
<li>{{badge}}</li>
{{/each}}
</ul>
{{/each}}
{
"version": "0.17.1",
"ENV": {
"ember-cli-mirage": {
"enabled": true
}
},
"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-cli-mirage": "1.1.8",
"ember-data": "3.18.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment