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
Related
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.
I'm new to Ember and I can't find anywhere a solution to my problem. I have read the questions here in stack and in other ember forums, but none of them seems to work for me.
I'm trying to create a simple signup form. I should note that for the backend I use django.
Here is my code:
Server Response:
[{"username":"user1","password":"123","email":"user1#example.com"},
{"username":"user2","password":"456","email":"user2#example.com"}]
Ember Model:
import DS from 'ember-data';
export default DS.Model.extend({
username: DS.attr(),
password: DS.attr(),
email: DS.attr()
});
Ember Adapter:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
host: '/api',
contentType: 'application/json',
dataType: 'json',
headers: {
username: 'XXXX',
password: 'XXXX'
}
});
Ember Serializer:
import DS from 'ember-data';
export default DS.JSONSerializer.extend({
primaryKey: '_id'
});
Ember Route:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('account');
}
});
Ember Controller:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
signup(){
console.log('My username is: ', this.get('username'));
console.log('My password is: ', this.get('password'));
console.log('My email is: ', this.get('email'));
var account = this.store.createRecord('account', {
username: this.get('username'),
password: this.get('password'),
email: this.get('email')
});
account.save();
}
}
});
With this implementation I get the aforementioned error. Any help would be appreciated. Thank you in advance.
Your backend should respond with an id, i.e
{"id":123,"username":"user1","password":"123","email":"user1#example.com"}
You don't really need to use the serializer, unless you want a specific field to act as an id. So in the example above, ember-data would expect your backend to return
{**"_id":123**,"username":"user1","password":"123","email":"user1#example.com"}
Or you could do something like this:
import DS from 'ember-data';
export default DS.JSONSerializer.extend({
primaryKey: 'username'
});
And use your username as an id.
I fixed my error. The problem was that the backend was using username as id so ember could not recognized it.
The fixed code for the Ember Serializer is:
import DS from 'ember-data';
export default DS.JSONSerializer.extend({
primaryKey: 'username'
});
I have a designed a app in ember.Now the app has feed page similar to fb and instagram.Now to get the username and his display pic, I have to send the request to "http://example.com/api/users/profile/?targetuser=-1" and the to get the user feed I have to make the requests to "http://example.com/api/feed".I am not able to figure out how to do it.
routes.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin,{
model(){
return Ember.$.ajax({
url: 'http://example.com/api/users/profile/?targetuser=-1',
headers:{
"Authorization":"token b0"
},
success:function(user_details)
{
console.log(user_details.full_name);
}
});
},
model(){
var inflector = Ember.Inflector.inflector;
inflector.uncountable('feed');
return this.store.findRecord('feed');
}
});
But in this case request is made only to "http://example.com/api/feed" and the ajax call is left.
I also want to store the data from both call to different store ,So that I can use it in hbs.
my models
feed.js
import DS from 'ember-data';
export default DS.Model.extend({
FeedResult: DS.attr(),
// gallery_name:DS.attr(),
// feedPhotos:DS.attr()
});
profile.js
import DS from 'ember-data';
export default DS.Model.extend({
results: DS.attr(),
photos:DS.attr()
});
Please suggest how should I do this so I can display the username,display pic and his feed on same page just like fb and instagram.
In an application using ember 2.1.0 and ember-data 2.1.0, I have this model :
# app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr()
});
And this route :
# app/routes/subscriptions/new.js
export default Ember.Route.extend({
model() {
this.store.findRecord('user', 1).then(function(data) {
console.log(data.id)
console.log(data.get('email'))
})
return this.store.find('user', 1);
}
});
I have this adapter :
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({host: 'http://localhost:5000'})
This data is returned by the server :
{"data":{"id":"1","type":"users","attributes":{"email":"test#test.com"}}}
In the console, I have the user id but the email is undefined. In the template, {{model.email}} gives nothing.
I may miss something but it's so simple. Is it my mistake or a bug?
You have to also specify email attribute in model:
export default DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string')
});
I have an application running with Ember 1.12.0. I have a simple template called /app/templates/repositories.hbs with this content :
{{controllers.user.login}}
I added this in the controller app/controllers/repositories.js :
import Ember from 'ember';
export default Ember.ArrayController.extend({
needs: "user",
});
I have this route :
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
var user = this.modelFor('user');
console.log(user);
return Ember.$.getJSON('https://api.github.com/users/'+user.login+'/repos');
}
});
And this router :
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('index', {path: '/'} );
this.resource('user', {path: '/users/:login'}, function() {
this.resource('repositories');
});
});
export default Router;
According to the documentation. I should show the user login but I have just nothing. It show the user object in the console but not in the view.
Is the a solution ?
If I understand correctly, you have a user model fetched in user route (as you can see it in console, the modelFor works properly). However, you are trying to get login object on user controller - I think that it's not defined. What you really want to get is login property of the object that is the model for user route (probably it's the user, but you didn't posted your user route code).
To use these two models in one controller you don't need to share these controllers. All you need is the model for user route. Thus, you can leave your model hook as follows:
model: function(params) {
return Ember.$.getJSON('https://api.github.com/users/'+user.login+'/repos');
}
And write your setupController method as follows:
setupController: function(controller, model) {
controller.set("model", model);
controller.set("user", this.modelFor("user");
}
And in your template you would have your repos from AJAX and the user property with that property.
{{user.login}}
On the other hand, you could, with some fixes, use the shared user controller obtaining same effect, but it's not what you need - you need only the model for that controller, not the whole object.