backbone model saving, validation fails - backbone.js

no amount of Googling is managing to solve my confusion so I thought I'd ask the question on here.
I'm trying to save a model and make use of success/error callbacks. On the backbone documentation it states you save your model like so: model.save([attributes], [options]).
I cannot find anywhere on the documentation that tells you how to save the entire model (i.e. without specifying the attributes), but have come across this question where the second answer says to save the entire model you can do model.save({}, [options]).
However I am trying this to no avail. My code is below:
Backbone Model:
class Student extends Backbone.Model
url: ->
'/students' + (if #isNew() then '' else '/' + #id)
validation:
first_name:
required: true
last_name:
required: true
email:
required: true
pattern: 'email'
schema: ->
first_name:
type: "Text"
title: "First Name"
last_name:
type: "Text"
title: "Last Name"
email:
type: "Text"
title: "Email"
In my view I have the following function:
class Students extends CPP.Views.Base
...
saveModel = ->
console.log "model before", #model.validate()
console.log "model attrs", #model.attributes
#model.save {},
wait: true
success: (model, response) ->
notify "success", "Updated Profile"
error: (model, response) =>
console.log "model after", #model.validate()
console.log "model after is valid", #model.isValid()
console.log "response", response
notify "error", "Couldn't Update"
In the first console.log before the save I am told that the model is valid, via the means of an undefined response. If indeed I look at the model I can see that all three fields are filled in.
Similarly in the next two console logs in the error #model.validate() and #model.isValid() both return undefined and true respectively.
However the response I get from trying to save the model is Object {first_name: "First name is required", last_name: "Last name is required", email: "Email is required"}
Finally in the console.log of the models attributes I get:
Object
created_at: "2012-12-29 23:14:54"
email: "email#email.com"
first_name: "John"
id: 2
last_name: "Doe"
type: "Student"
updated_at: "2012-12-30 09:25:01"
__proto__: Object
This leads me to believe that when I passed {} to my model it was actually trying to save the attributes as nil, else why else would it have errored?
Could someone kindly point out what I'm doing wrong? I'd rather not have to pass each attribute individually to the save!
Thanks in advance

From the suggested answer by Hui Zheng I modified my controller in my server to return the student in JSON format.
However to find the real source of the problem I read the backbone documentation on saving, and found out that when wait: true is given as an option it performs the following:
if (!done && options.wait) {
this.clear(silentOptions);
this.set(current, silentOptions);
}
On further investigation into clear I found
clear: function(options) {
var attrs = {};
for (var key in this.attributes) attrs[key] = void 0;
return this.set(attrs, _.extend({}, options, {unset: true}));
},
From this it looks as if every attribute is being cleared to then be reset. However on clearing my model the validations I wrote will fail (since first_name, last_name, email are required).
On the backbone.validation documentation we are told that we can use the parameter forceUpdate: true, so I have opted to use this when saving my model. I'm going to assume for now (although this might not be good practice) that the data from the server is correct since this has been validated too.
Therefore my final code is:
saveModel = ->
#model.save {},
wait: true
forceUpdate: true
success: (model, response) ->
notify "success", "Updated Profile"
error: (model, response) ->
notify "error", "Couldn't Update"

Are you sure that the model's attributes have been set correctly before save? Even none of its attributes has been set, it may still pass validate(depending on how validate function is defined). Please try to print the model in the console to verify that. BTW, it's better to pass null instead of {} in save, this way the model's set method won't be invoked.
Updated:
According to the Backbone's source code, if passing null as the first argument of save, the model's attributes will be kept intact until the model has been saved on the server successfully. So the other possibility is that your server has succeeded in saving the model but returned a corrupted object, resulting in failure in model's set method. If you still cannot fix the problem, tracing the model.set method might help。

Related

Submit a POST form in Cypress and navigate to the resulting page

I'm having issues with Cypress loading the response body when I utilize the cy.request() command.
In our application, when a form is filled out and submitted, it POSTs, and the response body is the new page.
When I'm trying to do in Cypress is programmatically fill out the form. So I set up a cy.request() command, with the body filled with the form fields, which is the same as what happens when you fill it out manually. When I run the command, I can view the console and see that the correct body is being returned, but the new document page doesn't load. So I'm left just sitting on the old empty form page.
cy.request({
url: "company-webpage-form-url.com",
method: "POST",
form: true,
body: {
first_name: "first_name",
last_name: "last_name",
company_name: "company_name",
address1: "address1",
address2: "address2",
city: "city",
state: "NY",
zip: "13903",
country: "US",
phone_number: "607-555-5555",
phone_ext: "555",
fax_number: "fax_number",
fax_ext: "fax_ext",
email: "developer#company.com",
email_2: "developer#company.com",
user_data: "Continue"
}
});
All of the data is correct, and I get the correct response body, but I can only see it in the console. I have no idea how to get it to load, like it would when I submit the form. All I get right now is a 200 response, and the test ends.
I've tried visiting the next URL right after, but I get an error that the page for that URL doesn't exist. I've tried clicking the submit button after the POST, but that just results in an empty form being submitted, which causes a validation error.
I'm at a loss for how to get cypress to load the response body, which is in the form of a document (the new page). Anyone have any tips?
Edit: I should add that - the reason I am looking to fill the form from a POST is because the form is necessary to fill out for me to test whether certain options work or not. I have a single test that ensures the form fields and submission work as required, but for the 30+ options that need to be checked on the other side of this form, I wanted to follow Cypress' best practice of not manually filling the form every single time (they show an example with login on the website).
If you'd like to simulate a form POST navigating to a new page, you can use cy.visit() to do this! Just change your request to visit and it should work:
cy.visit({
url: "company-webpage-form-url.com",
method: "POST",
body: {
first_name: "first_name",
last_name: "last_name",
company_name: "company_name",
address1: "address1",
address2: "address2",
city: "city",
state: "NY",
zip: "13903",
country: "US",
phone_number: "607-555-5555",
phone_ext: "555",
fax_number: "fax_number",
fax_ext: "fax_ext",
email: "developer#company.com",
email_2: "developer#company.com",
user_data: "Continue"
}
});
cy.request() is intended to be used for accessing APIs to set up your tests, it does not interact with the application under test or the DOM at all.
If you want to test form submission, use cy.get(), cy.type(), and cy.click() to interact with the form like a real user would:
// fill out a form field
cy.get('input[name="first_name"]')
.type('first name here')
.get('input[name="last_name"]')
.type('last name here')
/** fill out more form fields **/
// simulate clicking submit
cy.get('input[type=submit]')
.click()

mongoose query: find an object by id in an array

How could I find an image by id in this Schema. I have the id of the User and the id of the image I am looking for. What would be the best way to do this and do all images in this case have different ids or could they have the same id because they don't belong to the same User?
My Schema looks like this:
var userSchema = new Schema({
local: {
email: String,
password: String
},
facebook: {
id: String,
token: String,
email: String,
name: String
},
name: String,
about: String,
images: [{
id: Schema.ObjectId,
link: String,
main: Boolean
}]
});
When you are interested in the full object it is a simple find:
.find({"facebook.id":"<id>", "images.id":<image-id>})
I don't think that there is a way to reduce the image array in the result.
To update a single element in the image array you can use this:
.update({"facebook.id":"<id>", "images.id":<image-id>}, {$set : {"images.$.main" :false} } );
userSchema .find({facebook.id: "some ID",{ "images.id": { $in: [ id1, id2, ...idn] }}
since images are inside the document you can have same ID's however every time you query you should keep in mind that you send some other parameters such as facebook.id or facebook.email along with image id's to retrieve them. Otherwise you end up getting all that might be irrelevant only because you decide to keep same ID's for images.
tl;dr
I struggled with this and came up with a solution. Like you, I was trying to query for a deeply nested object by the _id, but I kept coming up empty with the results. It wasn't until I did some type checking that I realized the id value I was getting from my frontend, while directly supplied by mongoose, was in fact a String and not an Object.
I realize this question was already partially answered before, but that person's solution didn't work for me, and the comment on the answer tells me you wanted to update the specific image you queried for, which is exactly what I was trying to do.
The solution
In order to select an object from the nested array by the _id value, first you'll have to install the npm package bson-objectid and use the provided method to convert your string into an objectId in your query.
In your terminal:
npm i bson-objectid
In your code:
const ObjectId = require('bson-objectid')
userSchema.findOneAndUpdate(
{ "facebook.id": <user-id>, "images._id": ObjectId(<image-id>) },
{ "$set": { "images.$.main": false } },
{ new: true }, // an extra options parameter that returns the mutated document
(err, user) => {
if (err) {
handleErr(err)
} else {
console.log(user)
// do something with new user info
}
)

model's fetch does not work

Here is body of my model
urlRoot: '/users',
parse: function(response) {
return response.User;
}
Here is what is returned when I type /users/1 in my browser:
{"User":{"id":"1","created":"2013-02-13 09:22:42","modified":"2013-02-13 09:22:42","username":"somesuername","password":"","role":"somerole","token":null,"token_expiration":null}}
So the api works.
When I execute this:
this.model.id = 1;
this.model.fetch({ success: function(user){
console.log(user);
}}); // this.model is instance of my model
I get in console:
d {cid: "c4", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}
_changing: false
_pending: false
_previousAttributes: Object
attributes: Object
__proto__: Object
changed: Object
cid: "c4"
id: Array[1]
__proto__: e
So the result was successful by model didn't fetch any data - am I missing something?
Backbone.Model stores the data inside the attributes property. From Backbone documentation:
The attributes property is the internal hash containing the model's state — usually (but not necessarily) a form of the JSON object representing the model data on the server. It's often a straightforward serialization of a row from the database, but it could also be client-side computed state.
Please use set to update the attributes instead of modifying them directly.
Try expanding the attributes node in the console object inspector, and you should see your data.

How to read additional response data after syncing store

I have the following situation. I have a TreeStore that is synced with my server. The server response returns the modified node data with an additional property 'additionalTasks' (which stores some server-generated info for new nodes). How can I get this property's value if all of the store's listeners get already an instantiated record object and not the raw response data ? I've tried adding this additional field to my model, but when I check it's value for the records in the listener function they're shown as null.
Ext.define('ExtendedTask', {
extend: 'Ext.data.NodeInterface',
fields: [
{ name : 'additionalData', type : 'auto', defaultValue : null, persist : false}
]
});
var store = Ext.create("Ext.data.TreeStore", {
model : 'ExtendedTask',
autoSync: false,
proxy : {
method: 'GET',
type : 'ajax',
api: {
read : 'tasks.js',
update : 'update.php',
create : 'update.php'
},
reader : {
type : 'json'
}
},
listeners: {
update : function(){
console.log('arguments: ', arguments);
}
}
});
And this is my update.php response :
<?php
echo '[ { "Id" : 1,'.
'"Name" : "Planning Updated",'.
'"expanded" : true,'.
'"additionalData": ['.
' {'.
' "Name" : "T100",'.
' "parentId" : null'.
' }'.
']'.
']';
?>
The store's proxy always keeps the raw response from the most recent request. Try something like this and see if the information you need is there.
update : function(){
console.log(this.proxy.reader.rawData);
}
I've faced the same issue. What I ended up having to do was use a standard tree model property (I used cls) for whatever custom data you are trying to load into the model. I could be wrong but from the time I took looking to this issue, it seems that extjs is forcing a tree model to only use the standard fields. They state:
If no Model is specified, an implicit model will be created that implements Ext.data.NodeInterface. The standard Tree fields will also be copied onto the Model for maintaining their state. These fields are listed in the Ext.data.NodeInterface documentation.
However from testing it seems that only the standard fields are available regardless of if a model is specified. Only workaround I could find was to use an a standard string type field which I didn't need like cls, though I'd be interested to see if anyone has found a better way.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.TreeStore

How properly initialize a model to use the `get` function?

I have a model, and when I do model.attributes.model I see the attributes of the model. One attribute is name, so model.attributes.model.name returns the right name. However, when I do model.get('name') I get the default that I had set in the model.
How do I set all the attributes of the model so that it works with get?
JSON used to build the model
[{
"model":{
"name":"My name",
"description":
"Description goes here!",
"vote_score":null
},
"context":{}
}]
Either modify your server-side code to return an array of model attributes, as you said in the comments, or modify your model definition to override the parse method :
var MyModel=Backbone.Model.extend({
parse: function(data) {
return data.model;
}
});

Resources