CODEWITHSUNDEEP
ember.jsyeoman
Cheluis
Cheluis

Reputation: 1412

Ember and Yeoman error on edit controller

Following this post, on creating an workflow with Yeoman and Ember, when I hit the /#/story/new url I get this error:

Error while loading route: Getbookmarks.StoryEditRoute<.model@http://localhost:9000/scripts/combined-scripts.js:117
superWrapper@http://localhost:9000/bower_components/ember/ember.js:1230
getModel@http://localhost:9000/bower_components/ember/ember.js:33281
model@http://localhost:9000/bower_components/ember/ember.js:33209
invokeCallback@http://localhost:9000/bower_components/ember/ember.js:9427
publish@http://localhost:9000/bower_components/ember/ember.js:9097
publishFulfillment@http://localhost:9000/bower_components/ember/ember.js:9517
DeferredActionQueues.prototype.flush@http://localhost:9000/bower_components/ember/ember.js:5650
Backburner.prototype.end@http://localhost:9000/bower_components/ember/ember.js:5741
Backburner.prototype.run@http://localhost:9000/bower_components/ember/ember.js:5780
Ember.run@http://localhost:9000/bower_components/ember/ember.js:6181
runInitialize@http://localhost:9000/bower_components/ember/ember.js:38453
jQuery.Callbacks/fire@http://localhost:9000/bower_components/jquery/jquery.js:2913
jQuery.Callbacks/self.fireWith@http://localhost:9000/bower_components/jquery/jquery.js:3025
.ready@http://localhost:9000/bower_components/jquery/jquery.js:398
completed@http://localhost:9000/bower_components/jquery/jquery.js:93

http://localhost:9000/bower_components/ember-data/ember-data.js
Line 3285

The detail of the error is:

error(error=TypeError: this.modelFor(...) is undefined


return this.get('store').find('story', this.modelFor('story').id);

, transition=Object { router={...}, promise=Promise, data={...}, more...}, originRoute=<Getbookmarks.StoryEditRoute:ember265> { routeName="story_edit", router=<Getbookmarks.Router:ember266>, store=<Getbookmarks.Store:ember267>, more...})ember.js (line 33949)
triggerEvent(handlerInfos=[Object { isDynamic=false, name="application", handler=<Getbookmarks.ApplicationRoute:ember268>, more...}, Object { isDynamic=false, name="story_edit", handler=<Getbookmarks.StoryEditRoute:ember265>}], ignoreFailure=true, args=[
TypeError: this.modelFor(...) is undefined

I don't have idea why I getting this. I've followed the tutyorial and I haven't skipped anything. My concerns is that the version of the tutorial is somewhat old, but the code is generated from the ember generator.

Any idea?

EDIT:

this is the generated code for the model:

Getbookmarks.StoryEditRoute = Ember.Route.extend({ model: function(params) { return this.get('store').find('story', this.modelFor('story').id); }, setupController: function(controller, model){ controller.set('model', model); buffer = model.get('attributes').map(function(attr){ return { key: attr.get('key'), value: attr.get('value') } }); controller.set('buffer', buffer) } });

Route: Getbookmarks.Router.map(function () {

this.resource('index',{path : '/'}); this.resource('story', { path: '/story/:story_id' }); this.resource('story_edit', { path: '/story/new' });

});

Upvotes: 0

Views: 136

Answers (1)

Ralf
Ralf

Reputation: 180

I hit the same problem yesterday, following the same guide. This seems to be a problem with the routes, as story edit expects a story_id, which we can't give it for a new story. I managed to solve this problem like this, adding a new route for story_new without the story_id:

in routes.js:

this.resource('story_edit', { path: '/story/edit/:story_id' });
this.resource('story_new', { path: '/story/new' });

Then empty StoryEditController (else the app will complain about the "needs: 'story'", besides it will be replaced later anyway) and add this in routes/story_new_route.js:

Getbookmarks.StoryNewRoute = Ember.Route.extend({
  renderTemplate: function() {
    var controller = this.controllerFor('storyEdit');

    this.render('storyEdit', { controller: controller } );
  }
});

This new controller will just redirect to storyEdit controller and use storyEdit-Template. Then empty story_edit_route.js (we'll go with the defaults for now) and you app should run.

Hope this works for you, too, otherwise just tell me and I can give more details.

Upvotes: 1

Related Questions