Forwarded conversation Subject: Backbone Model ajax request ------------------------
From: *Nadeeshaan Gunasinghe* <[email protected]> Date: Sat, May 16, 2015 at 4:27 PM To: Robert Kowalski <[email protected]>, [email protected], Michelle Phung < [email protected]> Hi guys I wrote an ajax call as I understood, as follows var RevTreeModel= Backbone.Model.extend({ initialize: function () { console.log("Inside event"); }, url: function () { console.log('insideURL'); return app.host + '/' + 'db3/36b3fc66c37205c5eff683bcf5002310?open_revs=all&revs=true'; }, sync: function (method, model, options) { console.log("inside Sync"); var params = { url: model.url(), type: 'GET' }; // console.log($.ajax(params)); return $.ajax(params); } }); var model= new RevTreeModel(); model.fetch({ success: function(response) { console.log("Inside success"); console.log(response); }, error: function (errorResponse) { console.log("Error"); } }); When I look at the terminal it shows that the request goes to the server and return a 200OK. I am struggling to get the data out of the response. I tried the success function inside but nothing. I included this in the stores.js Is the way I did this correct or is there any other way? If so can you give some tips regarding. :) Cheers -- Nadeeshaan Gunasinghe Department of Computer Science and Engineering University of Moratuwa Sri Lanka ---------- From: *Robert Kowalski* <[email protected]> Date: Sat, May 16, 2015 at 7:24 PM To: Nadeeshaan Gunasinghe <[email protected]> Hi Nadeeshaan, the server returns a 200 OK - but investigating further the response looks like this -- a multipart response: ``` --decb4497568804cd4c64600d1e6cd018 Content-Type: application/json {"_id":"_design/buchhaltung","_rev":"4-f8036e944ccc77c47cb75db459d9a1b3","language":"javascript","views":{"auswertung":{"map":"function(doc){emit([doc.typ, doc.mwst, doc.datum], doc.betrag);}","reduce":"_sum"}},"_revisions":{"start":4,"ids":["f8036e944ccc77c47cb75db459d9a1b3","4be31a91f509826e410747cbee255f06","8195375ba0a71eaf344e4834a5e2082f","9dbbe08588afacefd227525f97cdf44f"]}} --decb4497568804cd4c64600d1e6cd018-- ``` the response is not valid JSON, but we are expecting JSON for our backbone model. Hmm, when I remove the custom sync of your function, the error callback fires, because the content is not parseable for Backbone. So: because we need to handle the multipart response (we get the error without a custom sync) and from reading the docs (http://backbonejs.org/#Model-fetch) we need we need a custom sync and later we need to parse the returned Text, like you already do in your code without backbone ( https://github.com/apache/couchdb-fauxton/pull/401/files#diff-d0edce0b5f086ac3ee67123c4237cd0cR270 ) Backbone's sourcecode is fitting on a few pages and it has annotated sourcecode, I google `backbone annotated source`. On the page I search for fetch, (CTRL+F). I get to http://backbonejs.org/docs/backbone.html#section-80 and see: fetch passes the success and error callbacks to sync. It seems that the code you sent is just missing the error and success callbacks you passed to fetch: ``` sync: function (type, model, options) { return $.ajax({ error: options.error, success: options.success, url: this.url(), type: 'GET' }); }, ``` Some further reading, you will need it for your next steps: 1. check out `parse` for custom parsing of responses in the backbone docs 2. take a look how we populate the stores with react and flux actions in Fauxton, the active tasks are always a good start (hint: start with the routeobject and the route in `app/addons/activetasks/routes.js`) to see how we populate the models in the stores when you open the page. Happy weekend! Robert ---------- From: *Nadeeshaan Gunasinghe* <[email protected]> Date: Sat, May 16, 2015 at 7:27 PM To: Robert Kowalski <[email protected]> Hi Robert, I tried this one and it fired the Success. var RevDataModel = Backbone.Collection.extend({ url: app.host + '/' + 'db3/36b3fc66c37205c5eff683bcf5002310?open_revs=all&revs=true', // call original Backbone.Model#fetch with `dataType` equal `text` for $.ajax fetch: function (options) { options = _.extend(options || {}, { dataType: 'text' }); this.constructor.__super__.fetch.call(this, options); }, // store response in content attribute parse: function (response) { return {content: response}; } }); var model = new RevDataModel(); model.fetch({ success: function (response) { console.log("Inside success"); console.log(response.responseText); }, error: function (errorResponse) { console.log("Error"); } }); I just figured out that I have to set the datatype to *text* Now I am going to try extract the data from the response. Which I cant still find where.. :) Cheers ---------- From: *Robert Kowalski* <[email protected]> Date: Sat, May 16, 2015 at 7:56 PM To: Nadeeshaan Gunasinghe <[email protected]> Cool! You probably want to change Backbone.Collection.extend to Backbone.Model.extend Tip: you won't need the success and error callback in model.fetch For extraction of the data take a look at the further reading I provided, use parse to create real JSON that can passed to the model. Maybe search for `parse`in our sourcecode On Sat, May 16, 2015 at 3:57 PM, Nadeeshaan Gunasinghe -- Nadeeshaan Gunasinghe Department of Computer Science and Engineering University of Moratuwa Sri Lanka
