Get server's answer after saving model - ember.js

I use Ember data with a node js server; the model looks very simple:
Gmcontrolpanel.Product = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
});
Once the node server receives the product.save(), it persists the record in the mysql db, managing the record ID and answers like this:
{
product
{
id: 1,
name: "aaa",
description "bbb"
}
}
I need to get the id of the server's response (not the promise returned by save().then(), where id is null); how can i get it?
Update:
The node server, using express:
GMserver.post('/products', function (req, res) {
rootName = "product";
queryString = 'INSERT INTO products (id, name, descriptions ) VALUES ( '+ counters.prodcuts +', "' + req.body.product.name + '", "' + req.body.product.description + '")';
executeQuery(req, res, queryString);
responseToPost(counters.products, req.body.product, rootName, res);
counters.products++;
});
function executeQuery (req, res, querystring) {
connection.query(queryString, function(err, rows, fields){
if (err) throw err;
});
}
function responseToPost (id, data, rootName, res) {
var result = new Object();
result[rootName] = new Object();
var i = 0;
var answer;
result[rootName].id = id;
for(var key in data)
{
result[rootName][key] = data[key];
}
answer = JSON.stringify(result, null, '\t');
console.log(answer);
res.send(answer);
}
I can see by the log of answer here, that answer is the one written above;
I tried to change responseToPost to send always a static value like this:
result[rootName][key] = 'aaa';
but in Ember, doing
product.save().then(function(savedProduct) {
console.log(savedProduct.get('name'));
}
i get the sumbmitted value of name, not 'aaa' as I expected...
Second Update:
doing in Ember
product.save().then(function(savedProduct) {
console.log(savedProduct);
}
to see what savedProduct is, in Chrome i see the result of the log:
Class {id: null, store: Class, container: Container, currentState: (...), errors: Class…}
__ember1395755543625: "ember548"
__ember1395755543625_meta: Object
__nextSuper: undefined
_attributes: Object
_changesToSync: Object
_data: Object
__ember1395755543625_meta: Meta
_super: function superFunction(){
name: "asdf"
description: "asdfa"
__proto__: Object
_deferredTriggers: Array[0]
_inFlightAttributes: Object
_relationships: Object
_suspendedRelationships: false
_updatingRecordArraysLater: false
container: Container
currentState: (...)
get currentState: function () {
set currentState: function (value) {
data: (...)
errors: Class
id: null
isError: false
store: Class
toString: function () { return ret; }
__proto__: Object
where "asdf" and "asdfa" are the values i typed in the insert form on the app

The record should be updated if that's the JSON returned.
product.save().then(function(record){ //record is the same as product here
console.log(record.get('id'));
});

Related

Using the result of a promise in Ember.RSVP.hash

I've been pulling out my hair with this for a few hours now so I thought I'd just ask :)
In the model hook of my route, I'm grabbing the account ID from the session store. I'm also returning an Ember hash of layouts using a (presently) hard-coded ID:
model: function() {
var accountId = this.get('session.currentUser').then(function(user) {
return user;
}).then(function(user) {
return user.get('account');
}).then(function(account) {
var accountId = parseInt(account.get('id'));
console.log(accountId); // outputs 2
return accountId;
});
return Ember.RSVP.hash({
layouts: this.store.query('layout', { account_id: 2 })
});
},
/* {{log layouts}} in the template returns the correct list of layouts */
However, when I try and use the value of the first promise in the hash, as follows:
return Ember.RSVP.hash({
layouts: this.store.query('layout', { account_id: accountId })
});
I get the following error:
You must pass a resolver function as the first argument to the promise constructor
TypeError: You must pass a resolver function as the first argument to the promise constructor
I can almost understand this, as perhaps the accountID promise isn't resolved before the hash function is called.
But then I tried:
var _this = this;
var accountId = this.get('session.currentUser').then(function(user) {
return user;
}).then(function(user) {
return user.get('account');
}).then(function(account) {
var accountId = parseInt(account.get('id'));
console.log(accountId); // outputs 2
return accountId;
}).then(function(accountId) {
console.log(accountId); // outputs 2
return Ember.RSVP.hash({
layouts: _this.store.query('layout', { account_id: accountId })
});
});
This does not give any errors, but {{log layouts}} in the template returns 'undefined'.
Can anyone help, please?
Instead of returning the hash at the end, structure your promise the other way around:
var _this = this;
return Ember.RSVP.hash({
layouts: this.get('session.currentUser').then(function(user) {
return user;
}).then(function(user) {
return user.get('account');
}).then(function(account) {
return parseInt(account.get('id'), 10);
}).then(function(accountId) {
return _this.store.query('layout', { account_id: accountId });
})
});

ember-data find using a model fetched using other find's result

I am using this settup:
Ember : 1.10.0
Ember Data : 1.0.0-beta.16
jQuery : 1.11.2
ember-localstorage-adapter: 0.5.2
I managed to use the ember-cli to store some data in my datastore (Localstorage)
Now, I would like to retrieve the data. I have 3 classes in my model:
mtg-item.js
name: DS.attr('string'),
material: DS.attr('string'),
description: DS.attr('string')
mtg-point.js
long: DS.attr('string'),
lat: DS.attr('string')
mtg-item-at-point.js
item: DS.belongsTo('mtgItem', {inverse: null}),
position: DS.belongsTo('mtgPoint', {inverse: null})
Here are the data in localstorage:
mantrailling-item: "{"mtgItem":{"records":{"an0jf":{"id":"an0jf","name":"chaussette","material":"tissu","description":"carré de tissus"}}}}"
mantrailling-item-at-point: "{"mtgItemAtPoint":{"records":{"r7v07":{"id":"r7v07","item":"an0jf","position":"qqnpa"}}}}"
mantrailling-point: "{"mtgPoint":{"records":{"qqnpa":{"id":"qqnpa","long":"0","lat":"0"}}}}"mantrailling-style: "{"mtgStyle":{"records":{"rggrm":{"id":"rggrm","name":"default","path":null}}}}"__proto__: Storage
when I try to retrieve the data, I have no problem retrieving the mtgItem and the mtgPoint.
The issue is when trying to retrieve the mtgItemAtPoint.
I get an assert error:
Error: Assertion Failed: You cannot add a 'undefined' record to the
'mtgItemAtPoint.item'. You can only add a 'mtgItem' record to this
relationship.
When debugging, I observed that it occured when trying to set the mtgItem.
I narrowed the search in the belongs-to.js file line 70.
var type = this.relationshipMeta.type;
Ember.assert("You cannot add a '" + newRecord.constructor.typeKey + "' record to the '" + this.record.constructor.typeKey + "." + this.key +"'. " + "You can only add a '" + type.typeKey + "' record to this relationship.", (function () {
if (type.__isMixin) {
return type.__mixin.detect(newRecord);
}
if (Ember.MODEL_FACTORY_INJECTIONS) {
type = type.superclass;
}
return newRecord instanceof type;
})());
The assertion is trying to check if the newRecord is of extends the supertype DS.Model.
When I retrieve the values in debug, here is what I get for type and newRecord:
newRecord.type.__super__.constructor
(subclass of DS.Model)
type
(subclass of DS.Model)
So I don't get why the folowing:
return newRecord instanceof type
returns false?
For the record, I am calling the find like this:
var mtgItem = store.find('mtgItem', {name: "chaussette", material: "tissu"});
mtgItem.then(function(mtgItem) {
var mtgPoint = store.find('mtgPoint', {long: "0", lat: "0"});
mtgPoint.then(function(mtgPoint) {
var mtgItemAtPoint = store.find('mtgItemAtPoint', {item: mtgItem, position: mtgPoint});
});
});
I figured out after some hours of sleep (as usual...)
The problem was that store.find returns an Ember.Enumerable and not a Record. Therefore, you need to iterate trough the results in order to get the proper DS.Model objects. In my case, I needed only one record so I am using the first object.
here is the fix:
var mtgItems = store.find('mtgItem', {name: "chaussette", material: "tissu"});
mtgItems.then(function(mtgItems) {
var mtgItem = mtgItems.get("firstObject");
var mtgPoints = store.find('mtgPoint', {long: "0", lat: "0"});
mtgPoints.then(function(mtgPoints) {
var mtgPoint = mtgPoints.get("firstObject");
var mtgItemAtPoints = store.find('mtgItemAtPoint', {item: mtgItem, position: mtgPoint});
});
});

Emberjs access a nested property

This question is the following of this one emberjs display an object return from an ajax call
To resume a bit, I have a dynamic list generated with some button for each item of that list. I catch the event of any button with this class :
App.EnquiriesView = Ember.View.extend({
didInsertElement: function() {
var that = this;
this.$().on('click', '.view-btn', function(){
var id = $(this).attr('data-value');
that.get('controller').send('clickBtn', id);
});
}
});
And it goes to my controller here :
App.EnquiriesController = Ember.ObjectController.extend({
actions: {
clickBtn: function( id ) {
console.log('DEBUG: ClickBtn OK id = ' + id);
//console.log(App.Enquiries.findOne(id));
this.transitionToRoute('enquiry', /*App.Enquiries.findOne(id)*/id);
}
}
});
The router related :
App.EnquiryRoute = Ember.Route.extend({
model: function( param ) {
console.log('Enquiry id = ' + param.enquiry_id);
return App.Enquiries.findOne(param.enquiry_id);
}
});
and my map :
App.Router.map(function() {
this.resource('login', { path: '/' });
this.resource('home');
this.resource('enquiries', function (){
this.route('create');
});
this.resource('enquiry', { path: 'enquiry/:enquiry_id' }, function(){
this.route('update');
});
});
So far for now when the user click on the button its redirect correctly to the enquiry with the good URL (e.g : /#/enquiry/1)
But the problem is coming from my update class now. I've just create a button with the action helper to display the update form :
App.EnquiryController = Ember.ObjectController.extend({
actions: {
update: function() {
console.log('DEBUG: in EnquiryController update');
console.log(this.get('model'));
this.transitionToRoute('enquiry.update');
}
}
});
So when you click on the update button you are redirected to this kind of URL : /#/enquiry/undefined/update instead of /#/enquiry/1/update ...
I don't know how this can happen and how I can loose my id during the process...
Thanks for your help.
[edit] If you need to know what is my findOne function :
findOne: function(id) {
return $.ajax({
url: host + 'mdf/enquiry/' + id,
type: 'GET',
accepts: 'application/json',
success: function (data) {
console.log('DEBUG: GET Enquiry ' + id + ' OK');
},
error: function() {
console.log('DEBUG: GET Enquiry ' + id + ' Failed');
}
});
}
Its fetching the data from the server for every item after you've click on the related button in the list.
Here is the object I've got back :
Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseJSON: Object
responseText: "{"ok":true,"enquiry":{"id":1,"domainid":"domain","userid":"userid","status":null,"type":"new","customerName":"Marco","customerEmail":"Marco#email.com",...}"
setRequestHeader: function ( name, value ) {
state: function () {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
There's a number of issues going on here. A couple of things you're doing are very "non-ember" idiomatic, and I wouldn't be surprised if further issues pop up as a result. But I'll focus on the question asked, and if you want more advice on adjusting further segments I'm happy to provide it.
In short, you have the following code:
this.resource('enquiry', { path: 'enquiry/:enquiry_id' });
in your map, but an enquiry object that looks something like:
{"ok":true,
"enquiry":{
"id":1,
"domainid":"motorpark",
"userid":"motorpark/mpuser"‌​
...
}
}
And these don't match. Your map defines that it is serialized by a field enquiry_id *which does not exist on your model. To fix this you can do one of these solutions:
Solution 1: Adjust your model
If you want to keep your map as is, you'll need to adjust your model to have an enquiry_id field, such as:
{"ok":true,
"enquiry_id":1,
"enquiry":{
"id":1,
"domainid":"motorpark",
"userid":"motorpark/mpuser"‌​
...
}
}
Solution 2: Adjust your Map (recommended)
It's easier to just change your map though. To do this, replace your enquiry resource on the map with:
this.resource('enquiry', {path: 'enquiry/:enquiry.id'});
The . tells ember that the desired element is the id field within the enquiry object.
You'll also need to modify how you access the param value. Because you're naming an element of the param as enquiry.id you need to specify this as a variable name and not a path when retrieving the value. On your route, change all instances of:
param.enquiry_id
To:
param['enquiry.id']

ember.js sending actions to controllers from views

I've created a typeahead view and i'm trying to send an action to the current controller to set a property. Here is my typeahead view
App.Typeahead = Ember.TextField.extend({
dataset_name: undefined, //The string used to identify the dataset. Used by typeahead.js to cache intelligently.
dataset_limit: 5, //The max number of suggestions from the dataset to display for a given query. Defaults to 5.
dataset_template: undefined, //The template used to render suggestions. Can be a string or a precompiled template. If not provided, suggestions will render as their value contained in a <p> element (i.e. <p>value</p>).
dataset_engine: undefined, //The template engine used to compile/render template if it is a string. Any engine can use used as long as it adheres to the expected API. Required if template is a string.
dataset_local: undefined, //An array of datums.
dataset_prefetch: undefined, //Can be a URL to a JSON file containing an array of datums or, if more configurability is needed, a prefetch options object.
dataset_remote: undefined, //Can be a URL to fetch suggestions from when the data provided by local and prefetch is insufficient or, if more configurability is needed, a remote options object.
ctrl_action: undefined,
didInsertElement: function () {
this._super();
var self = this;
Ember.run.schedule('actions', this, function () {
self.$().typeahead({
name: self.get('dataset_name'),
limit: self.get('dataset_limit'),
template: self.get('dataset_template'),
engine: self.get('dataset_engine'),
local: self.get('dataset_local'),
prefetch: self.get('dataset_prefetch'),
remote: self.get('dataset_remote')
}).on('typeahead:selected', function (ev, datum) {
self.selected(datum);
});
});
},
willDestroyElement: function () {
this._super();
this.$().typeahead('destroy');
},
selected: function(datum) {
this.get('controller').send(this.get('ctrl_action'), datum);
}
});
Here's an implementation
App.CompanyTA = App.Typeahead.extend({
dataset_limit: 10,
dataset_engine: Hogan,
dataset_template: '<p><strong>{{value}}</strong> - {{year}}</p>',
dataset_prefetch: '../js/stubs/post_1960.json',
ctrl_action: 'setCompanyDatum',
selected: function (datum) {
this._super(datum);
this.set('value', datum.value);
}
});
and here's my controller
App.PeopleNewController = Ember.ObjectController.extend({
//content: Ember.Object.create(),
firstName: '',
lastName: '',
city: '',
state: '',
ta_datum: undefined,
actions: {
doneEditing: function () {
var firstName = this.get('firstName');
if (!firstName.trim()) { return; }
var lastName = this.get('lastName');
if (!lastName.trim()) { return; }
var city = this.get('city');
if (!city.trim()) { return; }
var state = this.get('state');
if (!state.trim()) { return; }
var test = this.get('ta_datum');
// Create the new person model
var person = this.store.createRecord('person', {
firstName: firstName,
lastName: lastName,
city: city,
state: state
});
// Clear the fields
this.set('firstName', '');
this.set('lastName', '');
this.set('city', '');
this.set('state', '');
// Save the new model
person.save();
},
setCompanyDatum: function(datum) {
this.set('ta_datum', datum);
}
}
});
I'm expecting the setCompanyDatum controller action to be called, but it's not. Everything else is working as expected. The App.Typeahead.selected method is being called with the right action name, but it doesn't actually call the action method.
the controller inside your App.Typeahead points to the instance of the App.Typeahead, not the controller from the route where you are creating the view.
You should just be using sendAction
http://emberjs.jsbin.com/EduDitE/2/edit
{{view App.Typeahead}}
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
},
actions:{
externalAction:function(item){
console.log('helllllo' + item);
}
}
});
App.Typeahead = Ember.TextField.extend({
internalAction: 'externalAction',
didInsertElement: function () {
this.sendAction('internalAction', " I'm a sent action");
this._super();
}
});

deleteRecord not getting called in ember-data

I'm making an adapter for the Web SQL storage for use in a Cordova application. So far it's going pretty well except for some reason the deleteRecord method isn't getting called at all. Here's an excerpt of my code:
DS.CordovaStorageAdapter = DS.Adapter.extend({
// Other methods...
deleteRecord: function(store, type, record) {
console.info('Deleting!');
var adapter = this;
var qr = new QueryRapper({id: record.get('id')}).tableName(this.tableName(type));
var query = qr.deleteQuery();
console.info(query);
function deleteSuccess(tx, results) {
adapter.didDeleteRecord(store,type,record);
}
return this.db.transaction(
function(tx) { tx.executeSql(query, [], deleteSuccess); },
function(err) { this.dbError(query, err, type, record); }
);
},
// Support methods...
});
Here's my Jasmine test:
describe('EmberCordovaStorageAdapter', function() {
var m;
beforeEach(function() {
waitForDbInit();
runs(function() {
m = App.TestModel.createRecord({
string: 'String!',
number: 1234,
date: new Date(),
boolean: true
});
m.save();
waitForReady();
});
});
// Other tests...
it('deletes a record', function() {
waitForReady();
runs(function() { console.info('Deleting in test!'); m.deleteRecord(); waitForDeleted(); });
runs(function() { expect(m.get('isDeleted')).toBe(true); });
});
function waitForDeleted(model) {
model = model || m;
waitForMessage(model, 'rootState.deleted.committed');
}
function waitForReady(model) {
model = model || m;
waitForMessage(model, 'rootState.loaded.saved');
}
function waitForMessage(model, msg) {
waitsFor(function() {
console.info(msg, model.get('stateManager.currentPath'));
return model.get('stateManager.currentPath') == msg;
}, 'model message: ' + msg, 1500);
}
});
I'm seeing in my JS console the message "Deleting in test!" but not the message "Deleting!". The github repo can be found here: https://github.com/eltiare/ember-cordova-storage
I don't have experience writing custom adapters, but a quick glance at your test I see your calling deleteRecord but I don't see a call to commit
In order for ember-data to actually attempt to delete the record you need to call commit. To commit the defaultTransaction you can do something like this:
m.get('store').commit();