StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POError saving new record with Ember.js: "Uncaught TypeError: Cannot call method 'lookup' of undefined"
primarykey
Id
18686010
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-09-08T16:31:58.130
FavoriteCount
0
LastActivityDate
2013-09-11T23:26:15.267
LastEditDate
LastEditorUserId
0
OwnerUserId
2284509
ParentId
0
PostTypeId
1
Score
0
ViewCount
1907
LastEditorDisplayName
text
Body
<p>I'm working on an initial "learning" Ember project which will ultimately evolve into a full application backed by a REST JSON service. For now, I'm just attempting to create a simple CRUD style set of pages for managing a list of companies. For now it's using LocalStorage until it works, then I intend to attach a REST adapter.</p> <p>After banging my head on this for three days I am coming to SO for help, please.</p> <p>The code included below (single HTML page style for ease of sharing) seems to work for listing, adding, and deleting company records, both with the LocalStorage adapter and the Fixture adapter. I am having two problems though, one of which is killing me.</p> <ol> <li><p>When I click the "Update Company" button in the company detail page (path /companies/:company_id, controller App.CompaniesEditController, route App.CompaniesEditRoute), it gives me an error "Uncaught TypeError: Cannot call method 'lookup' of undefined" that I can't figure out where it's coming from or why it's not saving. It also appears to be coming in asynchronously. The final "transitionToRoute" is also not being executed. I figure I'm setting up something incorrectly on the router, controller, or model (or maybe even the template), but I can't figure it out. This is the more urgent problem, please.</p></li> <li><p>(Lower priority) When data (the company name) is edited on the company detail page, but not saved, it evidently is still updating the data stored in the application (i.e., the Javascript state, not the persistent state). So, if I edit a company name from "abc" to "def" on that edit page, then just return to the company list, the name is updated in the company list. However, if I reload the page (forcing a reload of data from the local storage), the data is restored. How can I make a view/edit page that doesn't change anything if the "save" button is not pressed, please?</p></li> </ol> <p>Thanks for reading. Full code follows.</p> <pre class="lang-html prettyprint-override"><code><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">  <title>Company Test</title> <script src="handlebars-1.0.0.js"></script> <script src="jquery-1.10.2.js"></script>  <script src="ember-1.0.0.js"></script> <script src="ember-data-1.0.0-beta.2.js"></script>  <script src="localstorage_adapter-20130906.js"></script> <script> // App is the name of our ember application in JavaScript App = Ember.Application.create( { LOG_TRANSITIONS: true } ); // Our application's route map. App.Router.map(function() { this.resource('companies', { path: "/companies" }, function() { // This page has three versions, a list, a new company and edit an existing company. // The rendering goes through "companies" which should have an outlet for these // two sub-pages and the main page (companies/index). this.route('new', { path: "/new" }); this.route('edit', { path: "/:company_id" }); }); }); /////////////////////////////////////////////////////////////////////////////////////// // ROUTES App.CompaniesRoute = Ember.Route.extend({ // Tell what data is available to this route model: function() { return this.store.find('company'); } }); App.CompaniesIndexRoute = Ember.Route.extend({ model: function() { // Reuse the parent route's model: http://stackoverflow.com/questions/14609757/emberjs-1-0-0pre4-how-do-you-pass-a-context-object-to-a-resource-index-rout/14610816#14610816 return this.modelFor('companies'); } }); App.CompaniesEditRoute = Ember.Route.extend({ // This route's model has just the one specified company model: function(co) { console.log("Companies.Edit Route invoked with argument:"); console.log(co); // This is company_id because that is what is specified in the route var found = this.store.find('company', co.company_id); console.log("Companies.Edit model is:"); console.log(found); return found; } }); ////////////////////////////////////////////////////////////////////////////// // CONTROLLERS // From the index (main) page of the companies list, you can // add, edit and delete. Only delete has an action. The others // just go to different routes. App.CompaniesIndexController = Ember.ArrayController.extend({ actions: { // Deletes the specified company deleteCompany: function (co) { co.deleteRecord(); co.save(); } } }); // The new page shows some empty fields and when add is selected, // takes those and creates a new company from them. In the future, // if there is an error saving, stay on the page and show a message. // When added, clear the page for future use and go back to the // company list. We might want to pass a message to say "added company // so-and-so" at that point too. App.CompaniesNewController = Ember.ArrayController.extend({ actions: { createCompany: function () { // Get value of name input box var newName = this.get('name'); // Ignore blank companies if (!newName.trim()) { return; } // Create the new model entry var newCo = this.store.createRecord('company', { name: newName }); // Clear name for next company to add this.set('name', ''); // Save the new company to the model's backing store newCo.save(); // And move to the list page // TODO: Move this to the Router Events Hash (whatever that means) this.transitionToRoute('companies'); } } }); // This page edits a company and saves it to the persistent store. // TODO: How to make it not change the model object directly when // the form is changed, but not saved? App.CompaniesEditController = Ember.ObjectController.extend({ actions: { updateCompany: function () { // No idea why I can't save the company. Get this error: // Uncaught TypeError: Cannot call method 'lookup' of undefined /* var content = this.get('content'); console.log("Content is:"); console.log(content); console.log(content.data); */ var co = this.get('model'); console.log("Model is:"); console.log(co); console.log(co.get('data')); console.log("About to save..."); co.save(); console.log("Done with save..."); // Go back to the company list this.transitionToRoute('companies'); } } }); ////////////////////////////////////////////////////////////////////// // EMBER DATA // Set up Ember Data // And Local Storage Adapter - https://github.com/rpflorence/ember-localstorage-adapter App.Store = DS.Store.extend({ revision: 11, // Not sure what this means or is here for adapter: DS.LSAdapter }); // http://emberjs.com/guides/getting-started/using-other-adapters/ App.ApplicationAdapter = DS.LSAdapter.extend({ namespace: 'companies-demo' }); // We're using the LocalStorage Adapter now, not Fixture Adapter // App.ApplicationAdapter = DS.FixtureAdapter.extend(); ////////////////////////////////////////////////////////////////////////////////// // MODEL OBJECT TEMPLATES App.Company = DS.Model.extend({ // I get an error if I use the below: // Assertion failed: You may not set `id` as an attribute on your model. Please remove any lines that look like: // `id: DS.attr('<type>')` from App.Company //id: DS.attr('number'), name: DS.attr('string') }); // TEST DATA (When not using Local Storage Adapter) App.Company.FIXTURES = [ { id: 11, name: "Apple, Inc." }, { id: 12, name: "Netflix, Inc." }, { id: 13, name: "Facebook, Inc." }, { id: 14, name: "Google, Inc." }, { id: 15, name: "Microsoft, Inc." } ]; </script>  <script type="text/x-handlebars" data-template-name='application'> <header><font color="red">Shared page header</font></header> <div> {{outlet}} </div> <footer><font color="red">Copyright &copy; Somewhen Somewho (shared page footer)</font></footer> </script>   <script type="text/x-handlebars" data-template-name='index'> <p>{{#linkTo 'companies'}}View companies{{/linkTo}}</p> </script>  <script type="text/x-handlebars" data-template-name='companies'> {{outlet}} </script>  <script type="text/x-handlebars" data-template-name='companies/index'> <h1>Company List</h1> <p>{{#linkTo 'companies.new'}}Create a company{{/linkTo}}</p> <ul> {{#each}} <li> <label>{{#linkTo 'companies.edit' this}}{{name}}{{/linkTo}}</label> <button {{action "deleteCompany" this}}>delete</button> </li> {{/each}} </ul> </script>  <script type="text/x-handlebars" data-template-name='_company-form'> <p>{{#linkTo 'companies'}}Return to Company List{{/linkTo}} <hr/> <form> <p> {{#if id}}Company ID: {{id}}<br/>{{/if}} Company Name: {{input type="text" id="new-name" placeholder="New Co." value=name}} </p> </form> </script>  <script type="text/x-handlebars" data-template-name='companies/new'> <h1>Add Company</h1> {{partial "company-form"}} <p><button {{action createCompany this}}>Add Company</button></p> </script> <script type="text/x-handlebars" data-template-name='companies/edit'> <h1>Edit Company</h1> {{partial "company-form"}}  <p><button {{action updateCompany this}}>Update Company</button></p> </script> </head> <body bgcolor="#ffffff"></body> </html> <body bgcolor="#ffffff"></body> </html> </code></pre>
Tags
<ember.js>
Title
Error saving new record with Ember.js: "Uncaught TypeError: Cannot call method 'lookup' of undefined"
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USSoftware Engineer
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POError saving new record with Ember.js: "Uncaught TypeError: Cannot call method 'lookup' of undefined"
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
2. VO
  singulars
  PostPostId
  POError saving new record with Ember.js: "Uncaught TypeError: Cannot call method 'lookup' of undefined"
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COI'm having the issue you mention in #1 as well. I've tracked it down so far to "this.container" being undefined in JSONSerializer's transformFor. In my case, I'm trying to look up the transform for DS.attr("string"). I'm also doing a transitionToRoute after the save, but this might be a red herring (I'm actually transitioning it in a ".then"). Anyway, going to keep digging later, just wanted to post to see if you or anyone else has any ideas.
  singulars
  PostPostId
  POError saving new record with Ember.js: "Uncaught TypeError: Cannot call method 'lookup' of undefined"
  UserUserId
  USJoe Fiorini
2. COI have a pull request open to fix this issue. We'll see what happens. https://github.com/emberjs/data/pull/1261
  singulars
  PostPostId
  POError saving new record with Ember.js: "Uncaught TypeError: Cannot call method 'lookup' of undefined"
  UserUserId
  USJoe Fiorini

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.