I have the following router defined:
export default Router.map(function() {
this.route('user', { path: '/users/:username'}, function () {
this.route('tasks', { path: '/tasks'});
});
});
I then have the following routes:
// routes/user.js
export default Ember.Route.extend({
model(params) {
return params.username;
}
});
// routes/user/index.js
export default Ember.Route.extend({
model() {
// how do i get the username?
return ajax(/* get user's profile */);
}
});
// routes/user/tasks.js
export default Ember.Route.extend({
model() {
// how do i get the username?
return ajax(/* get user's tasks */);
}
});
And this template:
{{!-- templates/user.hbs --}}
<h1>{{model}}</h1>
{{outlet}}
How can I get username in the child routes to use in an ajax request?
You can use paramsFor or modelFor:
modelFor: http://emberjs.com/api/classes/Ember.Route.html#method_modelFor
return ajax(baseUrl + "/" + this.modelFor('user') + "/profile");
paramsFor: http://emberjs.com/api/classes/Ember.Route.html#method_paramsFor
return ajax(baseUrl + "/" this.paramsFor('user').username + "/tasks");
Related
I am trying to create and save a model in Ember but only the first entry in my form is saving leaving the others blank.
Before saving all of the models attributes are correct. (shown with logs)
Any help greatly appreciated!
My Model is:
import DS from 'ember-data';
export default DS.Model.extend({
endpoint: DS.attr('string'),
playerVersion: DS.attr('string'),
createdAt: DS.attr('date'),
updatedAt: DS.attr('date')
});
My Route is:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.createRecord('account');
}
});
My Controller is:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
save: function() {
var _this = this;
var model = this.get('model');
console.log(model.get('endpoint')); //Shows correct endpoint
console.log(model.get('playerVersion')); //Shows correct playerVersion
model.save().then(function(account) {
console.log(model.get('endpoint')); //Shows correct endpoint
console.log(model.get('playerVersion')); //Shows nothing
_this.transitionToRoute('accounts.index');
});
return false;
}
}
});
UPDATE - Was some settings needed on the custom Serializer needed.
export default JsonApiSerializer.extend({
keyForAttribute: function(key) {
//return Ember.String.dasherize(key);
return Ember.String.camelize(key);
},
keyForRelationship: function(key) {
//return Ember.String.dasherize(key);
return Ember.String.camelize(key);
},
keyForSnapshot: function(snapshot) {
//return Ember.String.dasherize(snapshot.typeKey);
return Ember.String.camelize(snapshot.typeKey);
},
});
I wonder how to get the param (the ID) of my edit route in Ember.js.
That's how I defined my route:
this.resource('accounting', function() {
this.resource('accounting.requests', { path: '/requests' }, function() {
this.route('new');
this.route('archived');
});
this.resource('accounting.request', { path: '/request/:request_id' }, function() {
this.route('edit');
});
});
Now I want to fetch the model by its ID on this edit route /accounting/request/3/edit:
App.AccountingRequestEditRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('request', params.request_id);
}
});
But this doesn't work because params is empty.
This works as expected, but the edit route doesn't:
App.AccountingRequestRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('request', params.request_id);
}
});
When you are in a child route you can use this.modelFor, example:
App.AccountingRequestEditRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('request');
}
});
Because in order to go to request.edit, you have to provide an id or object to its parent resource, request either directly going to the route passing the url to the browser or indirectly by transition from other routes that happen to link to edit.
I have a blog route, and a blog-post route.
Router:
App.Router.map(function () {
this.resource('blog', function () {
this.route('post', {path: ':id/:title'});
});
});
Routes:
App.BlogRoute = Ember.Route.extend({
model: function () {
return this.store.find('BlogPost');
}
});
App.BlogPostRoute = Ember.Route.extend({
model: function (params) {
return this.store.findById('BlogPost', params.id);
},
serialize: function (model, params) {
return {
id: model.get('id'),
title: Ember.String.dasherize(model.get('title'))
}
}
});
In my Handlebars template for the parent blog route I have an {{outlet}} that works fine when I click one of the {{#link-to}}s.
What I want to do is render by default the most recent (highest ID) blog post when a user goes to the /blog route.
I found this question and tried this as a result, to no avail:
App.BlogIndexRoute = Ember.Route.extend({
redirect: function () {
var latest = 3;
this.transitionTo('blog.post', {id: latest});
}
});
(latest is just a placeholder for this.model.pop() or whatever it needs to be.)
I just can't figure out how exactly to load the sub route with the data from the model.
You can fetch the model for any resource/route that has already been fetched (aka parent resources) using modelFor
App.BlogIndexRoute = Ember.Route.extend({
redirect: function () {
var blogs = this.modelFor('blog');
if(blogs.get('length')){
this.transitionTo('blog.post', blogs.get('firstObject')); // or blogs.findBy('id', 123)
}
}
});
I got the following code:
App.ApplicationSerializer = DS.ActiveModelSerializer.extend({});
App.Router.map(function(){
this.resource('clients', { path : '/' });
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api'
});
App.ClientsRoute = Ember.Route.extend({
setupController: function(controller, model){
controller.set('model', model);
this.controllerFor('patients').set('model', this.store.find('patient'));
}
});
When the main page is loaded a request is sent only to localhost:3000/api/patients and not to clients which is the main controller for the given view :/
Can you spot the mistake? I am using App.ApplicationSerializer = DS.ActiveModelSerializer.extend({});
I thought that might be the error, but after removing it I saw no changes at all.
You are not defining the model for ClientsRoute:
App.ClientsRoute = Ember.Route.extend({
model: function() {
return this.store.find('client');
}
});
The only case where its not necessary to define the model, is when the route is a simple dynamic segment (show a specific record). Example:
App.Router.map(function() {
this.route('client', { path: '/clients/:client_id' });
});
App.ClientRoute = Ember.Route.extend({
// Default model (no need to explicitly define it):
// model: function(params) {
// return this.store.find('client', params.client_id);
// }
});
I'm trying to redirect /dashboard/ to /dashboard/reach/demographic if the url hits /dashboard/.
Problem is, I still get redirected to /dashboard/reach/demographic/ if I hit a subroute like **/dashboard/traffic.
What is the Ember way of doing this?
Here is my code:
(function() {
App.Router.map(function(match) {
this.resource('dashboard', function() {
this.resource('traffic', function() {
this.route('visits');
this.route('pageviews');
return this.route('duration');
});
return this.resource('reach', function() {
this.route('demographics');
this.route('over_time');
return this.route('devices');
});
});
return this.route('audience');
});
App.DashboardRoute = Ember.Route.extend({
redirect: function() {
return this.transitionTo('reach.demographics');
}
});
if (!App.ie()) {
App.Router.reopen({
location: 'history'
});
}
App.reopen({
rootUrl: '/'
});
}).call(this);
Implement redirect in DashboardIndexRoute instead of DashboardRoute.
App.DashboardIndexRoute = Ember.Route.extend({
redirect: function() {
return this.transitionTo('reach.demographics');
}
});
I created a jsbin example for you. Try:
http://jsbin.com/odekus/6#/dashboard/
http://jsbin.com/odekus/6#/dashboard/traffic
I also removed unnecessary return's from the code.