Converting Backbone.js App to communicate with parse.com

Question

I am an IT student and I'm learning how to use Backbone.js. I read all the documentation but I find it easier to learn when I use example apps,because I never have been programming this type of apps,so it was hard and confusing to think of a way to build my own app, so I used https://github.com/dperrymorrow/example-backbone-app to make similar edited app. The example app doesn't have a server side. Now I need to connect the app to use parse.com as a backend(server-side) instead to use local collection. If someone could please tell me what should I change and transform in the code so it connects example app to parse.com app with REST API so when I edit something in the app to be syncronized with parse.com.

I will be really grateful if someone is willing to explain this in a more descriptive way than saying :"you should read documentatin" because I did,and I still don't get the point :)

Have a nice day.

Answer 1

It's just about having the right backbone models and collections and settings the right url on the collection and urlRoot on the model. Then you can just can just call backbone methods like sync, save or delete.

Best detailled answer covering also the REST explanation probably is this one.

Answer 2

Cant you just swap the backbone collection and model to Parse's ones? Parse.com is a webservice providing REST interfaces for anything you like, Lets connect that to our Backbone models.

First of all Lets create a new app on Parse.com, mine is called FunkyAppartments. Insert the script tag for loading Parse javascript lib into index.html or whathever:

<script src="http://www.parsecdn.com/js/parse-1.5.0.min.js"></script>

Switch the backbone model and collection to use parse types instead (and rename the fetch method if you have extended backbones, since we do not want to overide the one of parse):

  //var Appartment = Backbone.Model.extend(); Backbone wo. Parse.com
  var Appartment = Parse.Object.extend("Appartment");

  //var Appartments = Backbone.Collection.extend({ Backbone wo. Parse.com
  var Appartments = Parse.Collection.extend({
    model: Appartment,
    initializeData: function(){
      var self = this;
      var callback = function (data){console.log(data); self.reset(data)};
      S.Appartments.loadAppartments(callback);

    },
    loadAppartments: function(callback){
      debugger;
      this.query = new Parse.Query(Appartment);
      var result = this.fetch();
      callback(result);
      return result;
    }

  });

I added a debugger tag in the load appartments so that developer tools breaks in the middle of the controller, here I have access to the Appartment private type of the controller, hence i can store some data on the parse server and verify by pasting the below in the developer tools console.

var testAppartment = new Appartment();
testAppartment.save({name: "foobars"}).then(function(object) {
  alert("yay! it worked");
});

Yei, the data shows up in the parse.com UI for the app we just added there. And more importantly it shows up in our frontend. That was easy!