Last active
December 11, 2015 23:39
-
-
Save jergason/4678104 to your computer and use it in GitHub Desktop.
Deleting a record removes all records? This is using the latest Ember and Ember Data built from master on January 30th, 2013. What am I doing dumb? Start the webserver and navigate to http://localhost:3000/#/tab, and click the delete button on one of the tab items, and behold the weirdness.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>Ordr: Rstaurant Mnu Systm</title> | |
| <script type="text/x-handlebars" data-template-name="tab"> | |
| <ul> | |
| {{#each tabItem in tabItems}} | |
| {{ partial "tabItem" }} | |
| {{else}} | |
| <li><h3>Click a food to add it</h3></li> | |
| {{/each}} | |
| <li><h3>Total <span>${{ cents }}</span></h3></li> | |
| </ul> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="_tabItem"> | |
| <li><h3>{{ tabItem.food.name }}<span>${{ tabItem.cents }}</span><button {{action "deleteTabItem" tabItem}}>Delete</button></h3></li> | |
| </script> | |
| </head> | |
| <body> | |
| <script src="js/libs/jquery-1.8.3.min.js"></script> | |
| <script src="js/libs/handlebars-1.0.0.rc.2.js"></script> | |
| <script src="js/libs/ember.js"></script> | |
| <script src="js/libs/ember-data.js"></script> | |
| <script > | |
| App = Ember.Application.create() | |
| App.Router.map(function() { | |
| this.resource('tab') | |
| }) | |
| App.TabRoute = Ember.Route.extend({ | |
| model: function() { | |
| return App.Tab.find(1) | |
| } | |
| }) | |
| App.TabController = Ember.ObjectController.extend({ | |
| deleteTabItem: function(tabItem) { | |
| tabItem.deleteRecord() | |
| tabItem.store.commit() | |
| // item not removed from page, but apparently deleted in memeory, because clicking | |
| // delete twice on the same item throws an error: | |
| // Uncaught Error: Attempted to handle event `deleteRecord` on <App.TabItem:ember312:401> while in state rootState.deleted.saved. Called with undefined | |
| // used to be this | |
| // var tabItems = this.get('tabItems') | |
| // tabItems.removeObject(tabItem) | |
| // tabItems.store.commit() | |
| // which threw no errors, but resulted in all of the items dissapering from the page | |
| } | |
| }) | |
| App.Store = DS.Store.extend({ | |
| revision: 11, | |
| adapter: 'DS.FixtureAdapter' | |
| }) | |
| App.Tab = DS.Model.extend({ | |
| tabItems: DS.hasMany('App.TabItem'), | |
| cents: function() { | |
| return this.get('tabItems').getEach('cents').reduce(function(accum, item) { | |
| return accum + item | |
| }, 0) | |
| }.property('[email protected]') | |
| }) | |
| App.TabItem = DS.Model.extend({ | |
| cents: DS.attr('number'), | |
| }) | |
| App.Tab.FIXTURES = [ | |
| { | |
| id: 1, | |
| tabItems: [400, 401, 402] | |
| } | |
| ] | |
| App.TabItem.FIXTURES = [ | |
| { | |
| id: 400, | |
| cents: 1500, | |
| food: 1 | |
| }, | |
| { | |
| id: 401, | |
| cents: 300, | |
| food: 2 | |
| }, | |
| { | |
| id: 402, | |
| cents: 700, | |
| food: 3 | |
| } | |
| ] | |
| </script> | |
| </body> | |
| </html> |
Im a beginner as well, but doing my best:
Try to to reload the TabItems by using a Callback after delete (didDelete) in your model.
This MIGHT reload the data and maybe it will change your records state to clear. hopefully :/ fighting the same error. bah
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I don't think you ever got an answer to this in #emberjs, but you actually aren't doing anything wrong AFAICT. When I hook up @rpflorence's localstorage adapter instead of the FixtureAdapter, the code behaves as you'd expect. I think there's something funky with the FixtureAdapter right now.