couchdb-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Nadeeshaan Gunasinghe <nadeeshaangunasin...@gmail.com>
Subject Re: Backbone Model ajax request
Date Sat, 16 May 2015 19:50:15 GMT
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 <
nadeeshaangunasinghe@gmail.com> wrote:

>
> Forwarded conversation
> Subject: Backbone Model ajax request
> ------------------------
>
> From: *Nadeeshaan Gunasinghe* <nadeeshaangunasinghe@gmail.com>
> Date: Sat, May 16, 2015 at 4:27 PM
> To: Robert Kowalski <rok@kowalski.gd>, ben.keen@gmail.com, Michelle Phung
> <michelle.phung@cloudant.com>
>
>
> 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* <rok@kowalski.gd>
> Date: Sat, May 16, 2015 at 7:24 PM
> To: Nadeeshaan Gunasinghe <nadeeshaangunasinghe@gmail.com>
>
>
> 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* <nadeeshaangunasinghe@gmail.com>
> Date: Sat, May 16, 2015 at 7:27 PM
> To: Robert Kowalski <rok@kowalski.gd>
>
>
> 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* <rok@kowalski.gd>
> Date: Sat, May 16, 2015 at 7:56 PM
> To: Nadeeshaan Gunasinghe <nadeeshaangunasinghe@gmail.com>
>
>
> 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

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message