Ember and Ember-cli Trouble with Dynamic Routes

Question

I've been having a lot of difficulty learning ember.js and ember-cli concurrently, primarily in trying to translate what's on the ember.js help docs to the ember-cli environment. I've been going in circles trying to figure out how to use dynamic segments with a field besides 'id'.

At Emberjs.com it gives an example using jQuery.getJSON and the serialize function, but I don't know

1) how to reference jquery from ember-cli (if I even need to do it the way the link above says to), and

2) It seems like no matter what I try, I get the error "cannot call method get of 'undefined'" in my serialize function

I'm currently using transitionToRoute since I'm trying to transition from a button instead of a link-to helper (better recommendations very welcome).

Here's the action my button uses (it's in a controller):

actions: {
  viewDetails: function() {
    this.transitionToRoute('project-details', this.get('projectName'));
  }
}

If my route is:

this.resource('project-details', {path: '/project/:project_projectName'});

Then the Ember docs would suggest that this is what I need in my project details route, but I haven't gotten any permutation of the serializer to work, so I'm sure I'm doing something wrong, but I don't know what.

model: function(params) {
    //I've tried all kinds of things in here, not sure if I need getJSON
    // since right now I'm just using fixture data
    //If I do need jQuery, not sure how to use it in ember-cli (i.e. the import statement to use)
    return jQuery.getJSON('/project/' + params.project_projectName);
},

serialize: function(model) {
  return { project_projectName: model.get('projectName') };
}

EDIT: Adding the model

var Project = DS.Model.extend({
  creationDate: attr('date'),
  lastModifiedDate: attr('date'),
  lastModifiedResourceId: attr('string'),
  ppmcNumber: attr('number'),
  ppmcUrl: attr('string'),
  phase: attr('string'),
  staffingProfile: attr('string'),
  projectType: attr('string'),
  projectDesc: attr('string'),
  product: attr('string'),
  clientId: attr('string'),
  clientName: attr('string'),
  overallStatus: attr('string'),
  liveDate: attr('date'),
  rygStatus: function(){
    return 'status-' + this.get('overallStatus').toLowerCase();
  }.property('overallStatus')
});

where is projectName defined? I assume the error is because "get" is not finding a value for it. — Grapho
@Grapho: projectName is defined on the Project model. The error is saying that it can't access the "get" method of "undefined" which I take to mean it doesn't know what model is, so it can't execute the get method. — redOctober13
I'm a little confused, you're model is ember data, but you're using $.getJSON. When are you creating/using that ember data model? — Kingpin2k
@Kingpin2k: that getJSON call was just basically what the Emberjs docs had, I didn't get it working. — redOctober13

Kingpin2k Kingpin2k · Accepted Answer · 2014-08-27T14:34:07

You need to use Ember.get since your object isn't an Ember Object (this can be easily rectified, by wrapping objects in an Ember.Object.create({}), but the getters and setters are only applied to Ember Objects)

serialize: function(model) {
  return { project_projectName: Em.get(model, 'projectName') };
}

Ember and Ember-cli Trouble with Dynamic Routes

1 Answers