Populating a BackboneJS model with response from an API endpoint

Question

I'm new to BackboneJS but I'm doing my best to learn it. I'm more familiar with AngularJS so I have some confusion in BackboneJS but would definitely want to become an expert BackboneJS developer too.

Back at my previous job, I was the frontend dev and I would work with the Java dev guy. We would have a meeting about how the JSON response would look like. Basically, I'll make a REST call(either with Restangular or $http) to one of their endpoints and I'll get a response. The JSON response will be assigned to a scope variable such as $scope.bookCollection. In my template, I'll just use ng-repeat to display it.

Now with BackboneJS, I'd like to do it properly. I read today that a BackboneJS Model is a container. What I'd like to happen is that after making a fetch(), I want the JSON response to be put in the Model that I defined. How is that done?

I found an example jsfiddle but I think it's a very bad example. I can't find something that is helpful right now, something with a good fetched data.

require.config({
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        underscore: 'http://underscorejs.org/underscore',
        backbone: 'http://backbonejs.org/backbone-min'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },

        underscore: {
            exports: "_"
        }
    }
});
require([
    'jquery',
    'underscore',
    'backbone'], function ($, _, Backbone) {
    var UserModel = Backbone.Model.extend({
        urlRoot: '/echo/json/',
        defaults: {
            name: '',
            email: ''
        }
    });
    var userDetails = {
        name: 'Nelio',
        email: '[email protected]'
    };
    var user = new UserModel(userDetails);

    user.fetch({
        success: function (user) {
            console.log(user.toJSON());
        }
    });
});

Here is the jsfiddle: http://jsfiddle.net/20qbco46/

Answer 1

I want the JSON response to be put in the Model that I defined. How is that done?

If you are trying to render the data from you model, you will use a view for this:

First, create a view to render your data:

// Create a new view class which will render you model
var BookView = Backbone.View.extend({
    // Use underscores templating
    template: _.template('<strong><%= title %></strong> - <%= author %>'),
    initialize: function() {
        // Render the view on initialization
        this.render();
        // Update the view when the model is changed
        this.listenTo(this.model, "change", this.render);
    },
    render: function() {
        // Render your model data using your template
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

See also: template and toJSON as well as $el

---

Next, create a Model:

// Create a model class
var Book = Backbone.Model.extend({
    urlRoot: '/echo/json/',
    defaults: {
        title : '',
        author: ''
    },
});

Your model will hold the data fetched from the url / urlRoot

You can use set if you are trying to add new attributes to your model.

You can use get to grab attributes from your model.

See also - save and destroy.

---

Then, instantiate your model:

// Some dummy data
var instance = {
    title: 'learn Backbone JS',
    author: 'Bobby Longsocks',
};

// Instansite your model
var model = new Book(instance);

And finally, fetch your model data and create a new instance of you view:

// Fetch your model
model.fetch({
    success: function(book) {
        // Instansite your view, passing in your model
        var view = new BookView({model: book, el: $('body')});
    }
});

Here is an Example you can fiddle with.

And some further reading: Annotated Source