deleteRecord with multiple belongsTo relationships in ember-cli - ember.js

What is the ember-cli best practice to deleteRecord() on a model that belongsTo multiple models? Do I have to manually clean up relationships on the parents?
Migrating from ember to ember-cli I am having new trouble with deleteRecord() for a model 'star' that belongsTo multiple models, 'post' and 'user'. Before moving to ember cli it was working with this solution.
The previous solution's delete action fails in the current ember-cli with errors and never calls the api. TypeError: Cannot read property 'modelFor' of undefined and Uncaught Error: Assertion Failed: TypeError: Cannot read property 'modelFor' of undefined at the line
var inverse = relationship.parentType.inverseFor(name);
// name is the string 'post'
Now I'm starting simple again. Here is a simple example of what I'm trying. Maybe I am missing something with es6, explicit inverses, or using needs:?
http://localhost:4200/post/1
models
// models/star.js
import DS from 'ember-data';
export default DS.Model.extend({
created: DS.attr('date'),
post: DS.belongsTo('post', {
async: true,
inverse: 'stars'
}),
user: DS.belongsTo('user', {
async: true,
inverse: 'stars'
})
});
// models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
headline: DS.attr(),
body: DS.attr(),
stars: DS.hasMany('star', { async: true })
});
// models/users.js
import DS from 'ember-data';
export default DS.Model.extend({
username: DS.attr(),
stars: DS.hasMany('star', { async: true })
});
controller
//controllers/post.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions: {
createStar: function(){
var self=this,
post = this.get('model'),
user = this.store.find('user', 2),
star;
user.then( function(user){
star = self.get('store').createRecord('star', {
post: post,
user: user
});
star.save().then( function(star){
post.get('stars').then( function(stars){
stars.pushObject(star);
});
user.get('stars').then( function(stars){
stars.pushObject(star);
});
});
});
},
deleteStar: function() {
var user = this.store.find('user', 2),
self = this;
user.then( function(user){
var filtered = self.get('stars').filterProperty('user.id', user.id);
var star = filtered[0];
star.deleteRecord();
star.save();
});
return(false);
}
}
});
Update: Alternate deleteStar post controller action re: #jjwon
deleteStar: function() {
var user = this.store.find('user', 2),
self = this;
user.then( function(user){
var stars = self.get('stars').then( function(items){
// log the post's stars before delete
items.forEach(function(item) {
console.log(item);
});
var filtered = items.filterBy('user.id', user.id);
var star = filtered.get('firstObject');
star.deleteRecord();
star.save().then(function(){
// log the post's stars after delete
items.forEach(function(item) {
console.log(item);
});
});
});
});
return(false);
}
Interestingly I found that if I add a star, reload the page, then delete it, that the star is successfully removed from the post's stars. Great!
But if I add a star and remove it without reloading, there is still a reference to the removed star with its id among the post's stars. Looking in the console, the removed star object is still referenced by the post with its id, but the user and post attributes are undefined.

stars is an async attribute of user. Therefore, when you have:
var filtered = self.get('stars').filterProperty('user.id', user.id);
var star = filtered[0];
star.deleteRecord();
star.save();
filtered might be a promise, so this might not be working as expected. Also, I'm not too familiar with filterProperty, but you don't have an attribute called user.id so it seems like that might be returning an empty list?

For now I'm cleaning up the relationships on the parents very manually. This works but isn't ideal.
deleteStar: function() {
var user = this.store.find('user', 2),
self = this;
user.then( function(user){
var star = self.get('stars').filterBy('user.id', user.id).get('firstObject');
// clean up relationships on parents very manually
// user.stars
user.get('stars').removeObject(star);
// posts.stars
self.get('stars').removeObject(star);
star.deleteRecord();
star.save();
});
return(false);
}

Related

Ember: model not being set by store in model hook route

So what I am doing is extremely basic: rendering model data to the template.
Upon setting the model hook, the {{model}} object doesn't show data in the corresponding template.
Here's my code:
contact (route):
user: Ember.inject.service('current-user'),
model: function()
{
// var that = this;
// console.log('whats being returned bitch: ', this.store.findRecord('contact', this.get('user').contactID));
//return this.store.findRecord('contact', this.get('user').contactID);
var records = this.store.findRecord('contact', this.get('user').contactID);
var promise = Ember.RSVP.defer();
// console.log('promise', promise.resolve());
// records.addObserver('isLoaded', function() {
// // console.log('records.getv', records);
promise.resolve(records);
//});
return promise;
},
setupController: function(controller)
{
// Get the parameters for the current route every time as they might change from one record to another
var params = this.paramsFor('dashboard.contact');
console.log('params', params);
// Set the data in the current instance of the object, this is required. Unless this is done the route will display the same data every time
this.module = Ember.String.capitalize(params.module);
this.id = params.id;
this.data = this.store.find(this.module,this.id);
// Set the data in the controller so that any data bound in the view can get re-rendered
controller.set('id',this.id);
controller.set('model',this.data);
controller.set('module',this.module);
}
});
First i was trying just this but it was not displaying data, then i tried deferring the promise and resolving it (like this) and finally i tried setting up the controller (setupController function) but that didn't work either since params is empty for some reason :/
contact(template):
<h1> Contact! </h1>
{{#each model as |contact|}}
<h3>{{contact.name}}</h3>
<h3>{{contact.password_c}}</h3>
{{/each}}
contact(model):
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
password_c: DS.attr('string'),
birthdate: DS.attr('string'),
assistant: DS.attr('string'),
account_name: DS.attr('string'),
email1: DS.attr('string'),
facebook: DS.attr('string'),
phone_home:DS.attr('string')
// address: Ember.computed('primary_address_street', 'primary_address_state',
// 'primary_address_city', 'primary_address_country', function() {
// return '${this.get('primary_address_street')} ${this.get('primary_address_state')} ${this.get('primary_address_city')} ${this.get('primary_address_country')}';
// })
});
Please help!
Let's assume this is your router
// app/router.js
import Ember from 'ember';
var Router = Ember.Router.extend({
});
Router.map(function() {
this.route('contacts', {path: '/contacts/:contact_id'});
});
export default Router;
and your model
// app/models/contact.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
password_c: DS.attr('string'),
});
then this is would be your contacts.js route it will have a very important role and We'll be using Ember Data's findRecord to retrieve an individual record from the data store.
// app/routes/contacts.js
import Ember from 'ember';
export default Ember.Route.extend({
model(param){
return this.store.findRecord('contact',param.contact_id);
}
});
note: this param is very important.The param is passed from the URL into the model. This posts model has an id that can be accessed via contact_id. It uses that id to look up the record so it can be returned. By default the template with the same name, contacts, will have access to this model.
Here we use Ember Data's findAll. This simply returns back all the records in the post data store.
// app/routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('contact');
}
});
now
// app/templates/application.hbs
{{#each model as |contact|}}
<h3>{{contact.name}}</h3>
<h3>{{contact.password_c}}</h3>
{{/each}}
As I don't have access to see your service and all your code I tried to simplify the way you can return all contact and get that and also how you can pass Param easily.
for more information : https://guides.emberjs.com/v2.7.0/tutorial/ember-data/
You can follow this codes and customize as you would like, I hope it will resolve your problem.
UPDATE:
If you have already your user data and it's ok, then remove {{#each}}
and let's have {{contact.name}}, that should work, you just need #each
while you have all contact like this.store.findAll('contact'); or if
you are in you must have this {{model.name}}, then model would be
contact !

How to extract a "ComputedProperty" to it's real value?

I'm trying to implement amCharts into a project, and it looks like when I pass it the EmberData model as it's dataProvider, it can't understand the promises.
I've tried to fix this by creating a computed property in my controller that looks like:
Route:
--route.js
import Ember from 'ember';
const {Route, RSVP} = Ember;
export default Route.extend({
queryParams: {
start: {refreshModel: true},
stop: {refreshModel: true}
},
model(params) {
let filter = {
filter: {
start: params.start,
stop: params.stop
}
};
return RSVP.hash({
users: this.store.query('userActivity', filter, {async: false}),
});
},
setupController(controller, model) {
controller.set('model', model);
controller.set('users', model.users);
},
});
Controller (there are other parts I've stripped out, but they aren't relevant, suffice to say they just change the query params which triggers a model refresh from route):
--controller.js
import Ember from 'ember';
const {Controller, computed, get, set} = Ember;
export default Controller.extend({
queryParams: [ 'start', 'stop' ],
dataProvider: computed('users', function () {
let users = get(this, 'users')
.map(function (user) {
return {
calls_out: user.calls_out,
calls_in: user.calls_in,
}
});
console.log(users);
return users;
}),
});
However, when I log this I get the following:
0: Object +
calls_in: ComputedProperty
calls_out: ComputedProperty
__proto__: Object
1: Object
2: Object
which means the object that amCharts needs to work with is still not the raw data. Is there a way to extract the data out into numbers rather than a Promise or a ComputedProperty?
Thanks!
Edit - adding userActivity model as requested:
import DS from 'ember-data';
import Ember from 'ember';
export default DS.Model.extend({
// Attributes
title: DS.attr('string'),
first_name: DS.attr('string'),
last_name: DS.attr('string'),
calls_in: DS.attr('number'),
calls_out: DS.attr('number'),
// Computed Attributes
full_name: Ember.computed('first_name', 'last_name', function () {
return `${this.get('first_name')} ${this.get('last_name')}`;
}),
// Relationships
user: DS.belongsTo('user')
});
Every attribute on a DS.Model is defined with DS.attr() and will be a Computed Property. This is required so that ember-data ca track changes and rollback or update attributes.
For your use case best is to use getProperties:
const {computed,get,getProperties} = Ember;
...
dataProvider: computed('users.#each.calls_out', 'users.#each.calls_in', function () {
return get(this, 'users').map(u => getProperties(u, 'calls_out', 'calls_in'));
})
Then get(this, 'dataProvider') will give you a raw Javascript Array with raw Javascript Objects with raw strings (or numbers, depending on your DS.attr).
What is in the "user" class? Are they Ember object? You may provide more code.
If "calls_in" and "calls_out" are computed properties of this user class, you should call them like this:
let users = get(this, 'users')
.map(function (user) {
return {
calls_out: user.get('calls_out'),
calls_in: user.get('calls_in'),
}
});

How to load belongsTo/hasMany relationships in route with EmberJS

In my EmberJS application I am displaying a list of Appointments. In an action in the AppointmentController I need to get the appointments owner, but the owner always returns "undefined".
My files:
models/appointment.js
import DS from 'ember-data';
export default DS.Model.extend({
appointmentStatus: DS.attr('number'),
owner: DS.hasMany('person'),
date: DS.attr('Date')
});
models/person.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string')
});
templates/appointmentlist.js
{{#each appointment in controller}}
<div>
{{appointment.date}} <button type="button" {{action 'doIt'}}>Do something!</button>
</div>
{{/each }}
controllers/appointmentlist.js
export default Ember.ArrayController.extend({
itemController: 'appointment'
});
controllers/appointment.js
export default Ember.ObjectController.extend({
actions:{
doIt: function(){
var appointment = this.get('model');
var owner = appointment.get('owner'); //returns undefined
//Do something with owner
}
}
});
Now, I know I can change the owner-property to owner: DS.hasMany('person', {async: true}), and then handle the promise returned from appointment.get('owner');, but that is not what I want.
I have discovered that if I do this {{appointment.owner}} or this {{appointment.owner.name}} in the appointmentlist template, the owner record is fetched from the server. So I guess Ember does not load relationships unless they are used in the template.
I think that the solution to my problem is to use the appointmentlists route to fetch the record in the belongsTo relationship. But I can't figure out how.
Maybe something like this?
routes/appointmentlist.js
export default Ember.Route.extend({
model: function() {
return this.store.find('appointment');
},
afterModel: function(appointments){
//what to do
}
});
EDIT
I did this:
routes/appointmentlist.js
export default Ember.Route.extend({
model: function() {
return this.store.find('appointment');
},
afterModel: function(appointments){
$.each(appointments.content, function(i, appointment){
var owner= appointment.get('owner')
});
}
});
and it works, but I do not like the solution...
You are still asynchronously loading those records, so if you are fast enough you could still get undefined. It'd be better to return a promise from the afterModel hook, or just modify the model hook to do it all.
model: function() {
return this.store.find('appointment').then(function(appointments){
return Ember.RSVP.all(appointments.getEach('owner')).then(function(){
return appointments;
});
});
}
or
model: function() {
return this.store.find('appointment');
},
afterModel: function(model, transition){
return Ember.RSVP.all(model.getEach('owner'));
}
Another way to go is:
export default Ember.Controller.extend({
modelChanged: function(){
this.set('loadingRelations',true);
Ember.RSVP.all(this.get('model').getEach('owner')).then(()=>{
this.set('loadingRelations',false);
});
}.observes('model')
});
This way the transition finishes faster and the relations are loaded afterwards. The loading-state can be observed through loadingRelations.
When there are a lot of relations to load I think this gives a better UX.
You want to load all the assocations in the route, because you want to use Fastboot for search engines and better first time site opened experience.
Holding your assocation loading after primary models are loaded, might not be the best decision.
I am using a syntax to load all assocations in the route:
let store = this.store;
let pagePromise = store.findRecord('page', params.page_id);
let pageItemsPromise = pagePromise.then(function(page) {
return page.get('pageItems');
});
return this.hashPromises({
page: pagePromise,
pageItems: pageItemsPromise
});
And for this.hashPromises I got a mixin:
import Ember from 'ember';
export default Ember.Mixin.create({
hashPromises: function(hash) {
let keys = Object.keys(hash);
return Ember.RSVP.hashSettled(hash).then(function(vals) {
let returnedHash = {};
keys.forEach(function(key) {
returnedHash[key] = vals[key].value;
});
return returnedHash;
});
}
});

Duplicate null-id records in ember-data

I'm using ember 1.0 and ember-data 1.0.0 beta 1. I have the following routes and controller to create and save simple notes ('AuthenticatedRoute' is just a custom made route for logged-in users):
App.Note = DS.Model.extend({
title: DS.attr(),
author: DS.attr(),
body: DS.attr(),
createdAt: DS.attr()
});
App.NotesRoute = App.AuthenticatedRoute.extend({
model: function() { return this.store.find('note'); },
});
App.NotesNewRoute = App.AuthenticatedRoute.extend({
model: function() {
return this.store.createRecord('note');
}
});
App.NotesNewController = Ember.ObjectController.extend({
actions: {
save: function() {
var self = this, model = this.get('model');
model.set('author', localStorage.username);
model.set('createdAt', new Date());
model.save().then(function() {
self.get('target.router').transitionTo('notes.index');
});
}
}
});
When I save a new note everything works as expected. But when I navigate away from the notes route and then back into it, the notes list is populated with a duplicate entry. One entry has an id and can be edited, deleted etc, the other has all the data of the first entry except the id attribute is null. It seems to me ember-data keeps the newly created record (that hasn't been committed to the database and thus has no id yet) alive even when the record becomes committed but I am uncertain as to why. When I reload the page, the list is correctly displayed, no duplicates appear. What am I doing wrong?
For the record, I am using mongodb so I use a custom serializer to convert '_id' attributes to ember-data friendly 'id's, essentially copied from here:
App.NoteSerializer = DS.RESTSerializer.extend({
normalize: function(type, hash, property) {
// normalize the '_id'
var json = { id: hash._id };
delete hash._id;
// normalize the underscored properties
for (var prop in hash) {
json[prop.camelize()] = hash[prop];
}
// delegate to any type-specific normalizations
return this._super(type, json, property);
}
});
I should also mention that this problem existed in ember-data 0.13 as well.
It was a stupid mistake in my RESTful server. I was responding to POST requests with a 204 (empty) response instead of what ember-data expected, that is a 201 ("created") response with the newly created record as the payload. This post made me realize it.
It would be nice though to include this information in the official REST adapter documentation.
That is certainly strange behaviour indeed. Unfortunately I'm not able to explain why you're experiencing this, however:
You can use the willTransition callback in the actions object in your Route to ensure that when it is transitioned away from, if NotesNewController's content property is dirty (i.e. has not been persisted yet), it will have its transaction rolled back.
App.NotesNewRoute = App.AuthenticatedRoute.extend({
model: function() {
return this.store.createRecord('note');
},
actions: {
willTransition: function (transition) {
var model = this.controllerFor('notesNew').get('content');
if (model.get('isDirty') === true) {
model.get('transaction').rollback();
}
return this._super(transition);
}
}
});

Ember js how to use the BasicAdapter

I am looking for a guide that will help me understand syncing models in ember. I tried to use the RestAdapter on the latest build and I am getting an error. So I decided to use the BasicAdapter based on stabilizing ember data on the ember js site.
Here is my model:
App.Accounts = DS.Model.extend({
name:DS.attr('string')
,date:DS.attr('date')
})
Here is where I declare the sync functions for the model.
App.Accounts.sync = {
list: function() {
$.ajax({
type: 'POST',
cache: false,
url: contextPath + 'account/list',
success: function(data) {
this.load()
},
error: function(jqXHR, textStatus, errorThrown) {
},
async: false
});
}
}
I am calling the list function in a setup controller:
App.TestRoute = Ember.Route.extend({
setupController:function(){
App.Accounts.list()
}
})
The function does not execute. What is the correct way to call sync functions in an ember application? Also, I could use a blog/article on this topic.
Thanks!
Have you checked out Ember Model it gives you a basic adapter without having to use EmberData.
Erik has a tutorial at embercasts.com you may need to signup to be beta user.
var attr = Ember.attr;
App.User = Ember.Model.extend({
id: attr(),
name: attr()
});
App.User.url = "/users";
App.User.adapter = Ember.RESTAdapter.create();
var newUser = App.User.create({name: "Erik"});
newUser.save(); // POST to /users.json
var existingUser = App.User.find(1); // GET /users/1.json
existingUser.set('name', 'Kris');
existingUser.get('isDirty'); // => true
existingUser.save(); // PUT /users/1.json
Cheers