//A backbone model
var RequestModel = Backbone.Model.extend({});
//A backbone model
var ResponseModel = Backbone.Model.extend({});
RequestModel.save({
success: function (ResponseModel ) {
alert(ResponseModel .toJSON());
}
})
Can i have a separate Model for Request and Response, as both Request and Response does not match. Its a total RPC call and not a CRUD operation.
I've thought about this same problem before, and I feel there isn't a great way to achieve this in Backbone. The best I've come up with is to implement a fromResponse and toRequest method on the model, and override model.parse and model.sync to map the model object to them. Something like:
var Model = Backbone.Model.extend({
fromResponse: function(responseAttrs) {
var modelAttrs = {}; //map response attributes to modelAttrs
return modelAttrs;
},
toRequest: function() {
//map model attributes to response attributes here
var modelAttrs = this.toJSON();
var responseAttrs = {}; //map models attributes to requestAttrs
return responseAttrs;
},
parse: function(response) {
return this.fromResponse(response);
},
sync: function(method, model, options) {
options = options || {};
options.data = this.toRequest();
Backbone.sync(method, model, options);
}
});
If the parse and sync are overridden in some kind of a base class, then you only need to implement the fromResponse and toRequest mappers for each model.
Another option would be to override Backbone.sync altogether, and map each Model type to some kind of ModelRequestMapper and ModelResponseMapper object to (de-)serialize each model. I feel that would be more complicated, but might scale better, if you have lots of models.
/Code sample not tested
Related
I made a website to create some maps. So, all my maps have an id, and my map has some elements with ids.
So I create a collection Map with an id and its model is my map object :
app.collections.mapDetailsCollection = Backbone.Collection.extend({
model: app.models.mapDetailsModel,
initialize: function(options) {
this.id = options.id;
},
url: function () {
return this.absURL + '/api/maps/' + this.id;
},
parse: function(response){
return response.features;
},
toGeoJSON: function(){
var features = [];
this.models.forEach(function(model){
var feature = model.toGeoJSON();
if (! _.isEmpty(feature.geometry)) {
features.push(feature);
}
});
return {
'type': 'FeatureCollection',
'features': features
};
}
});
But my model have an id too. I don't know for a model how to return url with a collection id.
I need to return /api/maps/id_collection/id_model.
When a model is added to a collection, it receives a reference to the collection. So each model has a collection property this.collection set if it's in a collection.
From the Backbone model constructor documentation (emphasis mine):
If you pass a {collection: ...} as the options, the model gains a
collection property that will be used to indicate which collection the
model belongs to, and is used to help compute the model's url. The
model.collection property is normally created automatically when you
first add a model to a collection. Note that the reverse is not true,
as passing this option to the constructor will not automatically add
the model to the collection. Useful, sometimes.
Then, you could use that to build the full url of a model:
var app.models.mapDetailsModel = Backbone.Model.extend({
urlRoot: function() {
// Backbone adds the model id automatically
return this.collection.url() + '/my-model/';
}
// ...snip...
});
Note that the default url for a model is what you want.
Generates URLs of the form: [collection.url]/[id] by default, but
you may override by specifying an explicit urlRoot if the model's
collection shouldn't be taken into account.
In a model I have one some attributes.
I would like one of the attributes to be placed in a seperate collection with another model, after I altered the data.
Now altering the data is not a problem and I know how to create the new object.
However I don't know what the best way to go is with:
where to alter the data
how to get it in my collection.
I tried several things from sending the complete attribute to the collection, where I do I have a parse which should give back a new object.
This however fails.
I also tried to do the same with the model and a parse.
Then I tried to just return the object in the 'url' section of the collection.
but as expected this does not work either. After which I tried to stringify the object to json, but this didn't work either.
So now I am thinking it might be the best way to start altering the data in Model A, after the data has ben received, and then push or add the data to the collection.
Maybe anyone else has a better idea of doing this?
And how do I know the data is in Model A, so I can start running the script?
First try in the collection: by URL
SatPhotoDataCollection = Backbone.Collection.extend({
model: SatPhotoDataModel,
url: function() {
var obj = satPhotoModel.attributes.Layer;
var layerNames = {};
for (var i = 0; i < obj.length; i+=1) {
//do some massive things filling layerNames
}
return layerNames;
}
});
Same thing, not using URL but parse, sending the 'satPhotoModel.attributes.Layer' to the collection using:
SatPhotoDataCollection.add(satPhotoModel.attributes.Layer);
SatPhotoDataCollection = Backbone.Collection.extend({
model: SatPhotoDataModel,
url: "",
parse: function(data) {
var layerNames = {};
for (var i = 0; i < data.length; i+=1) {
//do some massive things filling layerNames
}
return layerNames;
}
});
Of course I did the same in the model satPhotoDataModel (model B) in the URL and Parse, however I must the 'layerNames' I return is really a collection of 'layers', so hence the need for a collection ;)
Now in the satPhotoModel (model A) which will have the Layer in it's attributes I could also try something like:
SatPhotoModel = Backbone.Model.extend({
initialize: function() {
},
url: "http://geoservertest/geoserver/DIWADIS/ows?service=WMS&version=2.0.0&request=GetCapabilities",
sync: function(method, model, options) {
options.dataType = "xml";
options.crossDomain = true;
options.contentType = 'application/json; charset=utf-8';
return Backbone.sync(method, model, options);
},
//we are expecting an XML since we want a normal object, we do this with parsing
parse: function(data) {
var obj = $.xml2json(data);
this.parseLayers(obj.Capability.Layer);
return obj.Capability.Layer;
},
defaults: {
Abstract: "",
BoundingBox: {},
CRS: [],
Ex_GeographicBoundingBox: {},
Layer: [],
Tile: ""
},
parseLayers: function(data) {
var layerNames = {};
for (var i = 0; i < data.length; i+=1) {
//do some massive things filling layerNames
}
SatPhotoDataCollection.add(layerNames);
}
});
I am just doubting if that is really the correct way to go.
So any help and enlightenment would be awesome :-)
I'm looking for a way to intercept the value returned from a server when I fetch a backbone model (a collection, strictly speaking) from the server, then modify it before continuing. I would think that I could do something like this
SessionController.prototype._initPages = function() {
return App.pages.fetch({
reset: true,
success: function(model, response, options) {
//modify the contents of response
}
};
And my modifications would be reflected in the model that's used to initialize the view.
However I was looking at the backbone source and I think I may have misunderstood something.
fetch: function(options) {
options = options ? _.clone(options) : {};
if (options.parse === void 0) options.parse = true;
var success = options.success;
var collection = this;
options.success = function(resp) {
var method = options.reset ? 'reset' : 'set';
collection[method](resp, options); //this line updates the model
if (success) success(collection, resp, options); // my success callback
collection.trigger('sync', collection, resp, options);
};
wrapError(this, options);
return this.sync('read', this, options);
}
For my needs, it seems the two commented lines need to be switched, though I assume I'm just misunderstanding how to use this feature.
How can I modify the server response before it becomes my model?
I think you could just override the parse function to modify your data as needed
http://backbonejs.org/#Model-parse
I have the following Backbone Model and Collection
/**
* DataPoint
*/
var DataPoint = Backbone.Model.extend({
defaults: {
ts: null,
value: null
}
});
var DataPointCollection = Backbone.Collection.extend({
model: DataPoint
});
In order to populate and do what I need to do with the data I do something similar to this:
url = '/api/v1/database/1/data';
$.getJSON(url, params, function(data) {
var dps = new DataPointCollection;
dps.add(data.datapoints);
//Now do stuff with dps
});
I'm sure there is a better way to do this with Backbone but not sure how. I feel it should be more like telling the DataPoint collection to populate itself.
How to approach this on backbone?
Have a look at the docs, fetch is what you're looking for; here's the example took from there:
var accounts = new Backbone.Collection;
accounts.url = '/accounts';
accounts.fetch();
For mapping my backbone models to what I get from the server I am using a technique described on the GroupOn Dev blog: https://engineering.groupon.com/2012/javascript/extending-backbone-js-to-map-rough-api-responses-into-beautiful-client-side-models/
However, this only maps incoming data to the model.
I would like this to go both ways, so that when I save a model, it prepares the models attributes to match the servers model.
What would be the best solution to prepare the output of the model?
I've run into this exact same issue where my server response is completely different from what I am able to post. I discovered within the mechanics of the Backbone.sync object a way to that I could post to my server a custom JSON object in the following statement in Backbone.sync:
if (!options.data && model && (method == 'create' || method == 'update')) {
params.contentType = 'application/json';
params.data = JSON.stringify(model.toJSON());
}
sync evaluates if options.data does not exist then sets the params.data to the stringified model. The options.data check keyed me off. If that exists, sync will use that instead of the model. So given this, I overrode my model.save so could pass in an attributes hash that my server expects.
Here's how I overrode it:
save : function(key, value, options) {
var attributes = {}, opts = {};
//Need to use the same conditional that Backbone is using
//in its default save so that attributes and options
//are properly passed on to the prototype
if (_.isObject(key) || key == null) {
attributes = key;
opts = value;
} else {
attributes = {};
attributes[key] = value;
opts = options;
}
//In order to set .data to be used by Backbone.sync
//both opts and attributes must be defined
if (opts && attributes) {
opts.data = JSON.stringify(attributes);
opts.contentType = "application/json";
}
//Finally, make a call to the default save now that we've
//got all the details worked out.
return Backbone.Model.prototype.save.call(this, attributes, opts);
}
So how do you use this in your case? Essentially what you'll do is create a method that reverses the mapping and returns the resulting JSON. Then you can invoke save from your view or controller as follows:
getReversedMapping : function() {
ver reversedMap = {};
...
return reversedMap;
},
saveToServer : function() {
this._model.save(this.getReverseMapping, {
success : function(model, response) {
...
},
error : function(model, response) {
...
}
})
}
Since your overridden save automatically copies the JSON you pass in to options.data, Backbone.sync will use it to post.
The answer by Brendan Delumpa works, but it over-complicates things.
Don't do this in your save method. You don't want to copy over these parameter checks each time (and what if they somehow change in Backbone?).
Instead, overwrite the sync method in your model like this:
var MyModel = Backbone.Model.extend({
...,
sync: function (method, model, options) {
if (method === 'create' || method === 'update') {
// get data from model, manipulate and store in "data" variable
// ...
options.data = JSON.stringify(data);
options.contentType = 'application/json';
}
return Backbone.Model.prototype.sync.apply(this, arguments);
}
});
That's all there is to it when you need to "prepare" the data in a server-ready format.