I’m new working with Ember.js and ember-simple-auth. I’ve created an app that can authenticate users and has protected and unprotected routes which is great. However, I’m struggling with Ember’s ‘data down, actions up’ concept. I’m trying to do something very simple, create a profile page that displays data for the user that is signed in. I assume I need this data in the controller for my profile page, so I can display it on my template. In my controller, I call to the ‘store’ using the ‘findRecord’ function and I have my backend configured to query a database correctly. I expect ember to give me access to the data object that my backend responds with. However, when I console.log the response I get a Class obj which is very confusing. What’s embers best practice to perform this type of feature?
// controller 'profile.js'
import Ember from 'ember';
const {
Controller,
computed,
inject: { service },
get
} = Ember;
export default Controller.extend({
session: service('session'),
currentUser: computed('session.session.content.authenticated', function() {
var authenticator = Ember.getOwner(this).lookup('authenticator:jwt'),
session = this.get('session.session.content.authenticated'),
tokenData = {};
if(session && Object.keys(session).length > 0) {
tokenData = authenticator.getTokenData(session.token);
}
return tokenData.username;
}),
store: service(),
actions: {
test() {
console.log("got here: ", get(this, 'currentUser'));
get(this,'store').findRecord('user', 1 ).then(function (person) {
console.log("found person: ", person );
});
}
},
getCurrent() {
let user = get(this, 'currentUser');
console.log("current user: ", user );
return user;
}
});
// route 'profile.js'
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model() {
let users = this.get('store').findAll('user');
return users;
},
setupController(controller, model) {
this._super(...arguments);
controller.set('users',model);
controller.getCurrent();
}
});
// template 'profile.hbs'
<div class="jumbotron">
<h2 class="text-center">Profile Page</h2>
<h5 class="text-center">User Data</h5>
<div class="text-center">
Rankings
Games
<button class="btn btn-danger" >Logout</button>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 toppad" >
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">User Info</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 col-lg-3 " align="center">
<img alt="User Pic" src="http://ift.tt/2ltC07C" class="img-circle img-responsive">
</div>
<div class=" col-md-9 col-lg-9 ">
<table class="table table-user-information">
<tbody>
<tr>
<td>Email:</td>
<td></td>
</tr>
<tr>
<td>Hire date:</td>
<td>06/23/2013</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>01/24/1988</td>
</tr>
<tr>
<td>Gender</td>
<td>Female</td>
</tr>
<tr>
<td>Home Address</td>
<td>Kathmandu,Nepal</td>
</tr>
<tr>
<td>Email</td>
<td><a href="mailto:info@support.com">info@support.com</a></td>
</tr>
<td>Phone Number</td>
<td>123-4567-890(Landline)<br><br>555-4567-890(Mobile)
</td>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-info” >Testing</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 toppad" >
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Manage Picks</h3>
</div>
<div class="panel-body">
<p>here</p>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire