Hey All, According to the suggestions made by Robert, Ben and Michelle I changed the ajax call to the backbone model ajax, refactored the code to support flux flow (As I hope :) ) and the style errors also fixed. Please take a look at the latest changes at [1]
[1] https://github.com/apache/couchdb-fauxton/pull/401 Cheers. :) On Sat, May 16, 2015 at 8:05 PM, Nadeeshaan Gunasinghe < [email protected]> wrote: > > 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 > -- Nadeeshaan Gunasinghe Department of Computer Science and Engineering University of Moratuwa Sri Lanka
