Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Twiddle
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
add() {
const { title, calories } = this;
this.db.recipes.add({ title, calories: parseInt(calories) }).then(() => {
this.db.table("recipes")
.orderBy("calories")
.toArray()
.then(recipes => {
this.set("model", recipes)
});
});
}
}
});
import Ember from 'ember';
import Dexie from 'dexie';
export default Ember.Route.extend({
beforeModel() {
const db = new Dexie("recipes");
db.version(1).stores({
recipes: "++id,title,calories"
});
this.set("db", db);
},
model() {
return this.db.recipes.orderBy("calories").toArray();
},
setupController(controller, model) {
controller.set('db', this.db);
controller.set('model', model);
}
});
{{input placeholder="Title" value=title onChange=(action (mut title))}}
{{input placeholder="Calories" type="number" value=calories onChange=(action (mut calories))}}
<button onClick={{action "add"}}>Submit</button>
<table>
<thead>
<tr>
<th>Title</th>
<th>Calories</th>
</tr>
</thead>
<tbody>
{{#each model as |recipe|}}
<tr>
<td>
{{recipe.title}}
</td>
<td>
{{recipe.calories}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{
"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",
"dexie": "^2.0.4"
},
"addons": {
"ember-data": "3.4.2",
"ember-auto-import": "^1.5.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.