Backbone.js / require.js - Override model function to work with backend as a service

Question

Good morning guys. I have a little understanding problem with backbone.js. i have a javascript sdk from a backend as a service with some getter and setter methods to get datas from this platform.

I have load this javascript sdk with require.js an it´s work fine. Now i need to create some models that work with this getter and setter methods to get this data to my collection an finally to my view. I do not have any clue...maybe someone have the right idea for me.

This is my current model:

define(['jquery','underscore','backbone'], function($,_,Backbone) {
    var holidayPerson = Backbone.Model.extend({

        initialize: function() {

            console.log("init model holidayPerson");

            this.on("change", function(data) {
               console.log("change model holidayPerson"+JSON.stringify(data));
            });

        }
    });

    return holidayPerson;
});

Actually i create an instance of my model in my view:

define(['jquery','underscore','backbone','text!tpl/dashboard.html','holidayPerson','apio'], function($,_,Backbone,tpl, holidayperson, apio) {

    template = _.template(tpl);
    var usermodel = new holidayperson();

    var dashboardView = Backbone.View.extend({

        id: 'givenname',

        initialize: function() {
            console.log("dashboard view load");
            usermodel.on('change', this.render);

            var user = new apio.User();
            user.setUserName('xxx');
            user.setPassword('xxx');

            apio.Datastore.configureWithCredentials(user);

            apio.employee.getemployees("firstName like \"jon\" and lastName like \"doe\"", {
                onOk: function (objects) {

                    console.log("apio: " + JSON.stringify(objects));

                    usermodel.set({mail: objects[0]['data']['mail'],lastname: objects[0]['data']['lastName'], username: objects[0]['data']['userName'], superior: objects[0]['data']['superior']});

                }
            });
        },

        render: function() {
            console.log("render dashboard view");
            console.log(usermodel.get('mail'));
            console.log(usermodel.get('lastname'));
            this.$el.html(template());
            return this;
        }
    });

    return dashboardView;
});

I think this not the right way...can i override the getter and setter method from this model ? Or maybe the url function ? Anyone now what is the best practice ?

Thanks a lot :-)

Answer 1

First of all, make sure that your render operation is asynchronous, as your API call will be and the usermodel params won't be set until that operation completes. If you render method fires before that, it will render the empty usermodel, since the data will not be there yet.

Second, a model need not fetch its own data, in my opinion. If you are going to have multiple users, you could use a collection to hold those users and then override the collection's sync method to handle the fetching of data from the API, but if there's no collection, it seems logical to me to have a method that does the data fetching and setting thereafter, as you've done.