Not able to push the form data in to the ember store - ember.js

this is my controller code
controllers/new-user.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions:{
register:function(){
var person=this.store.createRecord('person'{
firstName:fname,
lastName:sname,
email:email,
password:password,
confirmPassword:confirmPassword
});
person.save();
}
}
});
I am working with ember-cli and i am new to ember so could you please tell me what is wrong in the code.

First there is to notice you should not use Ember.ObjectController but directly extend Ember.Controller. Checkout the deprecation.
Next all your variables fname, sname and so on are not declared. Probably you want to access the attributes on the controller. So either do this:
import Ember from 'ember';
const {get} = Ember;
export default Ember.ObjectController.extend({
actions: {
register(){
let person = this.store.createRecord('person', {
firstName:get(this, 'fname'),
lastName:get(this, 'sname'),
email:get(this, 'email'),
password:get(this, 'password'),
confirmPassword:get(this, 'confirmPassword')
});
person.save();
}
}
});
Or use .getProperties:
import Ember from 'ember';
const {get} = Ember;
export default Ember.ObjectController.extend({
actions: {
register(){
let person = this.store.createRecord('person', this.getProperties(
'fname',
'sname',
'email',
'password',
'confirmPassword'
));
person.save();
}
}
});
However my personal recommendation is to call createRecord in the model hook of the route and then directly bound your template to your model. Later just call .save() in your action.

Related

Ember.js : Modify request URL

I create an Ember app with a Symfony REST api. I also use the REST adapter for my requests.
I have 2 models in my app : users and their related comments.
I already created CRUD operations for my user properties and now I focus on the CRUD operations for comments.
Model user.js
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
comments: DS.hasMany('comment')
});
Model comment.js
export default DS.Model.extend({
title: DS.attr('string'),
message: DS.attr('string'),
user: DS.belongsTo('user')
});
I have a route which shows all comments (and other data) of a given user. The request loads the user object and his relations. On the view I also have a form and an action to create a new comment for this user.
Route users/get.js
import Ember from 'ember';
export default Ember.Route.extend({
id: null,
model(params) {
this.set('id', params.user_id);
return this.get('store').findRecord('user', params.user_id, {include: 'comments'});
},
});
Route users/get/comments.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.modelFor('user.get', params.user_id);
},
});
Controller users/get/comments.js
import Ember from 'ember';
export default Ember.Controller.extend({
newComment: null,
user: null,
init: function() {
this._super(...arguments);
let comment = this.store.createRecord('comment');
this.set('newComment', comment);
},
actions: {
saveComment: function() {
let user = this.get('model');
let comment = this.get('newComment');
comment.set('user', user);
comment.save();
}
}
});
Everything works, except for the request sent to the backend. I loaded the comments from the user, so I expect a call to :
POST http://my-app.local/users/comments/
Instead the call is sent to :
POST http://my-app.local/comments/
Do you know why and how could I correct it ?
Second problem, the model is loaded from the 'user.get' route. This works because the user comes from this route to this page, but... It's doesn't work if the user enters directly the URL for comments. That sound logical, but I have no clue how to correct this problem... Can you help me ?
This can be done by rewrite the CommentAdapter.urlForCreateRecord method. Which affect new comment record requests.
adapters/comment.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
urlForCreateRecord(modelName, snapshot) {
return '/users/comments'; // the url you want
}
});
There are several urlFor... method you might need to customise your url.
Just check out the document
http://devdocs.io/ember/classes/ds.buildurlmixin/methods#urlForCreateRecord

Best way to get Current User session in Ember with Torii

I would like to know what the best way is to get the User Model Record of the current logged in user. I'm using torii in combination with corresponding firebase adapter.
app/torri-adapters/application.js
import Ember from 'ember';
import ToriiFirebaseAdapter from 'emberfire/torii-adapters/firebase';
export default ToriiFirebaseAdapter.extend({
firebase: Ember.inject.service()
});
For example: I have a client model and at this moment i have this very ugly solution to query all client records associated with the current logged in user:
app/routes/clients.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
var _this = this;
return this.store.query('user', {
orderBy: 'email',
equalTo: this.get('session.currentUser.email')
}).then(function(user) {
var myUser = user.get('firstObject');
return _this.store.query('client', {
orderBy: 'user',
equalTo: myUser.id
}).then(function(client) {
return client;
});
});
}
});
For sure there is a better way to do this?
You could inject the currentUser into all your controllers, routes and components at the app initialization, so you will be able to refer to the current user simply by doing this.get('currentUser') wherever you need it. See the section which shows an example of how this is done here: https://guides.emberjs.com/v2.5.0/applications/dependency-injection/

Ember Why can't the model data be rendered into template?

So I've been beating my head against this for a few days now. I can't get my model data to render in the template at all. No errors are being thrown. Looking in the Ember Inspector, the Data tab shows my record loaded in tasks.
Any help much appreciated.
// app/adapters/application.js
import Ember from 'ember';
import FirebaseAdapter from 'emberfire/adapters/firebase';
const { inject } = Ember;
export default FirebaseAdapter.extend({
firebase: inject.service(),
});
// app/routes/tasks.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.findAll('task');
},
});
// app/model/task.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description:DS.attr('string'),
date: DS.attr('date'),
created: DS.attr('string',{
defaultValue:function(){
return new Date();
}
})
});
// app/templates/tasks.hbs
<h2>tasks</h2>
{{#each task in model}}
<h2>{{task.title}}</h2>
{{/each}}
Ember Inspector:
View Tree:
tasks emtasks/templates/tasks <DS.RecordArray..> tasks --
Data:
task(11)
You are using a newer version of ember. Try this:
// app/templates/tasks.hbs
<h2>tasks</h2>
{{#each model as |task|}}
<h2>{{task.title}}</h2>
{{/each}}

Sort by name attribute

companies and ships both have a name attribute. But I don't understand how I can use sortProperties in this code:
app/controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
selectedCompany: null,
companies: function(){
var model = this.get('model.companies');
return model;
}.property(),
ships: function(){
var model = this.get('model.ships');
return model;
}.property()
});
app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return {
companies: this.store.find('company'),
ships: this.store.find('ship')
};
}
});
How can I sort companies and ships by the name attribute?
Use the sortBy function. Like this:
import Ember from 'ember';
export default Ember.Controller.extend({
selectedCompany: null,
sortedCompanies: function(){
var model = this.get('model.companies').sortBy('name');
return model;
}.property('model.companies'),
sortedShips: function(){
var model = this.get('model.ships').sortBy('name');
return model;
}.property('model.ships')
});
Remember to put the property you observe into the .property() otherwise it's cache won't be invalidated when the model changes.

Only show part of template if there exists at least one child-object

I've got a model like this:
import DS from 'ember-data';
var Post = DS.Model.extend({
title: DS.attr('string'),
downloads: DS.hasMany('download')
});
export default Post;
and would like to show the downloads-section only when there is at least 1 or more downloads in the post.
I tried introducing a computed property in the Controller but can't access the model from there.
What else can I do?
EDIT: Here's the controller showing you what I was trying to do:
import Ember from 'ember';
export default Ember.ObjectController.extend({
hasDownloads: function(){
console.log(this.get('downloads')) // <- undefined
return true
}.property('model'),
})
EDIT2: The Object-controller above has no route since it's rendered using `{{render "post"}}. This is an example-template.
<ul class="posts">
{{#with model as post}}
{{render "post"}}
{{/with}}
</ul>
That would be its route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('post', params).then(function(posts) {
return posts.get('firstObject');
});
}
});
Directly access the property on your controller using model.downloads:
import Ember from 'ember';
export default Ember.ObjectController.extend({
hasDownloads: function(){
console.log(this.get('model.downloads'))
return true
}.property('model.#each'),
})
Depending upon which version of Ember you are using, the proxying behavior of the controller will no longer work. Also, change the property so that it is updated when downloads are added and removed.