-
-
Save denisos/1245613 to your computer and use it in GitHub Desktop.
| // backbone.js continues to impress, I needed to get data from a jsonp api | |
| // I really wanted to do this the "right" backbone.js way and create a model and call fetch. | |
| // But the default backbone synch is not jsonp | |
| // Turns out you can override a synch on a per model basis (thanks stackoverflow) | |
| // whats nice is backbone.js continue to work as expected with the override | |
| // here's a snippet (some changes to protect our privacy). An improvement could be to create a jsonp model class which MyModel inherits | |
| // the synch function is most important below, that's what tells backbone it's jsonp | |
| MyModel = Backbone.Model.extend({ | |
| url: function() { | |
| return '/yourJsonpUrlhere'; | |
| }, | |
| // override backbone synch to force a jsonp call | |
| sync: function(method, model, options) { | |
| // Default JSON-request options. | |
| var params = _.extend({ | |
| type: 'GET', | |
| dataType: 'jsonp', | |
| url: model.url(), | |
| jsonp: "jsonpCallback", // the api requires the jsonp callback name to be this exact name | |
| processData: false | |
| }, options); | |
| // Make the request. | |
| return $.ajax(params); | |
| }, | |
| parse: function(response) { | |
| // parse can be invoked for fetch and save, in case of save it can be undefined so check before using | |
| if (response) { | |
| if (response.success ) { | |
| // here you write code to parse the model data returned and return it as a js object | |
| // of attributeName: attributeValue | |
| return {name: response.name}; // just an example, | |
| } | |
| } | |
| } | |
| }); |
Hi, sorry for not replying to posts sooner. Re last comment "doesn't work". Yes it did! I used this code on a previous project for a large US retailer to do just this.
I did modify and simplify code for this gist, if it's not working and my fault I can only think it was me translating incorrectly. Otherwise it should work.
It may be a bug in the version of jquery? I did some debugging and using that technique the ajax success event is never fired. This event is used to trigger model.parse(), I've forked your version for others who might have a similar issue to me. Thanks for the code though, it certainly got me most of the way there.
you can simply do this someCollection.fetch({ dataType: 'jsonp' });
Thanks for these posts. I also found that mdigital's version worked for me but parse was never called in the code above.
Using jsonp: "jsonpCallback" stops backbone from ever calling model.parse which means this doesn't work! If you use url: model.url()+"?callback=?" and remove the jsonp option it works great.