Ember (data) linkTo without passing model, just fetch new model

2
votes

When using the linkTo helper in a handlebars template, Ember sets up the correct URL for the link with the help of the serializer I have added to the route:

serialize: function(slug, params) {
    var name, object;
    object = {};
    name = params[0];
    object[name] = slug;
    return object;
}

And when I click the link, Ember transitions to the correct page with the correct slug and everything, but it doesn't have the correct data, and it says that. I believe it's because what I pass to my linkTo statement as second parameter is just the slug and not the whole model.

Is it possible to get Ember to simply fetch the data as it would if I just typed the URL into the address bar instead of relying on the model (that is not) passed to the linkTo statement?

UPDATE I have tried this inside the activate method on my route, but now it seems the problem is that the rendering has to wait until this is done.

activate: function() {
    this.context.isLoaded = false;
    this.model(this.context.query.slug);
}

Any ideas? Maybe even with a prettier solution?

2
ember.jsember-data

2 Answers

4
votes

The solution I came up with at last, with help from some guys on IRC, was to use the setupController hook, like you mention, Darshan, and the serializer like this:

CustomRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        var modelName = this.routeName.substr(0, 1).toUpperCase() + this.routeName.substr(1),
            slug = model;
        if (model.hasOwnProperty('slug'))
            slug = model.slug;
        controller.set('model', App[modelName].find({'slug': slug}));
    },
    serialize: function(slug, params) {
        var name, object;
        object = {};
        name = params[0];
        object[name] = slug;
        return object;
    }
});

This way, you can supply just the slug of the route as the second parameter to the linkTo helper instead of a model, and the serializer will set the URL up properly, and then the setupController will check if the model has a property slug, which properly means it's a proper model, and if it does not, it just guesses that the model is simply the slug, and then it will use the DS.Model.find method to return a promise to the controllers model store.

Because setupController is called everytime a route is entered, where as the model hook is only called sometimes, the DS.Model.find method will be used everytime to fetch the data via the promise, and voila - fetch data each time you enter a route.

This assumes that you use Ember.Data and that your model object is called App.*route name* starting with a capital letter, but it can easily be modified to fit whatever need one might have.

For all of the routes in my app I now subclass (extend) from this route thus getting my desired behaviour for all of my routes.

0
votes

You can try using the slug name in the Route and then loading data for the Route using findQuery instead of find.

App.Router.map(function() {
  this.resource('product', { path: '/product/:slug' });
});

App.ProductRoute = Ember.Route.extend({
  model: function(params) {
    return App.Product.query({name:params.slug});
  }
});