how to read model in afterModel in ember - javascript

Server returning this json
{"auths":[{"id":0,"email":"abc","password":"","logged":false}]}
In ember debugger for chrome I can see the model filled.
EMSystem.Auth = DS.Model.extend({
email: DS.attr('string'),
password: DS.attr('string'),
logged: DS.attr('boolean')
});
EMSystem.HomeRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('auth');
},
afterModel: function(model) {
console.log(model.get('logged'));
//logic to change the route if user is logged
}
});
But for console.log I am getting undefined. How to access the model in after model?

findAll('type') and find('type') are synonymous and both return a collection. If you'd like to print out the logged value from each item you can use forEach/for to iterate over the collection.
afterModel: function(model) {
model.forEach(function(record){
console.log(record.get('logged'));
//logic to change the route if user is logged
});
}

Related

Synchronous data calls in Ember.js

I am trying to do the following when visiting reviews/show (/reviews/:id):
Load two models from the server: One review and one user.
I only have access to the review's id, so I need to load it first, to get the userId
And then, when that has finished loading and I now have the userId, query the user using the userId attribute from the review
Finally, return both of these in a hash so I can use them both in the template
So two synchronous database queries, and then return them both at once in the model hook of the route.
I don't mind if it's slow, it's fast enough for now and I need it to work now.
This is what I've tried and it doesn't work:
reviews/show.js
export default Ember.Route.extend({
model: function(params) {
var user;
var review = this.store.findRecord('review', params.id).then(
function(result) {
user = this.store.findRecord('user', result.get('userId'));
}
);
return Ember.RSVP.hash({
review: review,
user: user
});
}
});
You can do this:
export default Ember.Route.extend({
model: function(params) {
var reviewPromise = this.store.findRecord('review', params.id);
return Ember.RSVP.hash({
review: reviewPromise,
user: reviewPromise.then(review => {
return this.store.findRecord('user', review.get('userId'));
})
});
}
});
The reason why user is undefined is because it hasn't been assigned in your first promise until the review is resolved, but Ember.RSVP.hash has received user as undefined.

Meteor publication and subscription not working

I am working on an admin page that shows a list of the user's orders. For some reason, publication function is not receiving the user's ID as a parameter from my subscription function.
My user object contains the attributes:
_id
userId
confirmed
My orders object contains the attributes:
_id
userId
amount
date
My publication:
Meteor.publish('clientOrders', function(userId) {
console.log('user is ' + userId);
return Order.find({_id: userId});
});
My subscription:
viewClientOrders = RouteController.extend({
loadingTemplate: 'loading',
waitOn: function () {
Meteor.subscribe('clientOrders', this.params._id);
},
action: function() {
this.render('viewClientOrders');
}
});
My route:
Router.route('/viewClientOrders/:id', {name: 'viewClientOrders', controller: 'viewClientOrders', onBeforeAction: requireLogin});
I did a console.log for the userId and it returns null, although I clearly passed a userId parameter (this.params._id) in my subscription function. However, if I pass a parameter of 3, for testing purposes, it will work. Also, I used a similar publication/subscription method to view a client's profile, passing in the exact same parameters and it works fine...
Anyone know what's going on? Thanks!
Make sure you return in your waitOn. Iron Router will only proceed to render if it knows the subscription is ready:
viewClientOrders = RouteController.extend({
waitOn: function () {
return Meteor.subscribe('clientOrders', this.params._id);
}
...
Make sure you've also set a loadingTemplate (docs).

Ember.js - Access model attributes from activate function within Route

I have an Ember VeteranRoute set up as below. My Veteran model has name, date, info and medal attributes. I would like to access the veteran's name so I can add it to the title tag, as you can see in the activate function.
I can see that logging out this to the console in the context of the Route reveals the following which contains all the data I would like access to.
How can I access the name attribute from the data above? I have tried various this.Context._data.name combinations but none seem to work.
app.js VeteranRoute
App.VeteranRoute = Ember.Route.extend({
model: function(params){
return this.store.find("veteran", params.veteran_id);
},
activate: function() {
$(document).attr('title', this.veteran.name);
console.log(this);
}
});
do it in the setupController or afterModel that's when the model has been resolved and is available.
App.VeteranRoute = Ember.Route.extend({
model: function(params){
return this.store.find("veteran", params.veteran_id);
},
setupController: function(controller, model) {
this._super(controller, model);
$(document).attr('title', model.get('name;));
}
});

Reloading ember data from server

I'm trying to reload store data from the server after transitioning to a page.
The transition i'm referring in this case, is from an index page, to a specific page by id.
here is my code:
App.Board = DS.Model.extend({
title: DS.attr('string'),
boardItems: DS.hasMany('BoardItem'),
});
App.BoardItem = DS.Model.extend({
title: DS.attr('string'),
board: DS.belongsTo('Board')
});
App.BoardIndexRoute = Ember.Route.extend({
model: function() {
return {
title: 'Boards List',
boardItems: this.store.find('board')
}
}
});
App.BoardShowRoute = Ember.Route.extend({
model: function(params) {
// this.store.reloadRecord('BoardItem'); - tried this, didn't work :(
var boardData = this.store.findById('board', params.board_id);
return boardData;
}
});
what happens is:
Index - loads a list of boards, with empty boardItems array (I don't want to load all of the data on the index)
Then clicking a link to a specific board, transitions to it, but the data is empty and no requests made to the server.
I tried various ways of reloading it, but all fails...
here is the debug info if it might help:
DEBUG: Ember : 1.5.1 ember.js:3521
DEBUG: Ember Data : 1.0.0-beta.7.f87cba88 ember.js:3521
DEBUG: Handlebars : 1.1.2 ember.js:3521
DEBUG: jQuery : 2.1.0
Thanks!
Finding Records: If you provide a number or string as the second argument to store.find(), Ember Data will attempt to retrieve a record of that with that ID. This will return a promise that fulfills with the requested record:
App.BoardShowRoute = Ember.Route.extend({
model: function(params) {
// Providing both the model name, and board identifier
// Make sure the parameter exists.
// console.debug('My board identifier is', params.board_id');
return this.store.find('board', params.board_id); // => GET /boards/:board_id
}
});

Ember.js: How to use computed property as a route

I'm pretty new to Ember.js and am building an app to pick up some Ember chops. I wanted to use a computed property in one of my models as a route but it seems something isn't working correctly. I'm using FIXTURES by the way.
What I'm trying to achieve is /peeps/john-smith instead of /peeps/1
I've got my model setup like this:
App.Peep = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
slug: function(){
this.get('firstName').toLowerCase() + '-' + this.get('lastName').toLowerCase();
}.property('firstName', 'lastName')
});
My router setup is like this:
App.Router.map(function(){
this.resource('peep', { path: '/peeps/:peep_slug'});
});
App.PeepRoute = Ember.Route.extend({
model: function(params){
return this.store.find('peep', params.peep_slug);
},
serialize: function(model){
return { peep_slug: model.get('slug') };
}
});
When I navigate to /peeps/john-smith in the browser, I get this warning in my console You made a request for a peep with id john-smith.
Is there something I'm missing?
By default it searches by id param, so you could either change the adapter to make it search by slug or try to add id as Ember.computed.alias('slug').

Categories