not able to extend model from different file in backbone.marionette with require.js

Question

I'm trying to learn and make backbone.marionette app and have following 2 doubts/issues:

1) I'm trying to redirect a user to home page, instead of default login page, if he is already logged in. To check user is already login I have used jquery.cookie inside a model and use that model class on start of marionette application to check where to redirect. The cookie works fine, I get the value from cookie, but my application doesn't routes to home page. I'm doing this on app start event.App.on("start", function(options) {var session = new UserSession(); // UserSession is model containing jquery.cookie part if (session.authenticated()) { console.log("redirecting..."); App.trigger("users:list"); console.log("redirected"); } } In another file I have App.addInitializer( function (options) { new Backbone.Marionette.AppRouter.extend({ appRoutes: { "users": "listUsers" }, controller: MyRouteCtlr } }); App.on("users:list", function(){ console.log("triggered users list"); App.navigate("users"); MyRouteCtlr.listUsers(); }); The console out put is: redirecting... redirected What am I missing here? How I can redirect user to other page than default on page refresh after checking for login in cookie? Btw I'm using Require.js for dependencies.

Update: I have resolved first point, it was due to load ordering in require functions.

2) Another thing I tried to make a base-model and than have all others to extend that model. So for that I created base model in a file as follows:

define([
    'backbone'
],
function( Backbone ) {
    'use strict';
    return Backbone.Model.extend({
        initialize: function() {
            console.log("BaseModel");
        },

        defaults: {}
    });
});

Then I try to extend it in another file as :

define([
    'backbone',
    'localstorage',
    'base-model'
],
function( Backbone, BaseModel ) {
    'use strict';
    return BaseModel.extend({
        initialize: function() {
            console.log("sub model");
        },
    });
});

But when I run it gives error at line return BaseModel.extend(... saying undefined is not a function. If I write the base mode in same file then runs perfectly fine but not with different files. I want to have it in different file so all other models can also extend it. The same thing works for view without any error. What is going wrong here and how can I resolve that?

The BaseModel in extended class prints Backbone.LocalStorage.window.Store {name: undefined, serializer: Object, records: Array[0], save: function, create: function…} while in main js containing application object prints child {cid: "c2", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}.

1) backbonejs.org/#Router-navigate 2) if you do console.log(BaseModel) I imagine it is undefined and you haven't required in the right path — Dominic
@DominicTobias 2) it prints Backbone.LocalStorage.window.Store {name: undefined, serializer: Object, records: Array[0], save: function, create: function…} — Harry Joy
That sounds wrong a model doesn't have a serialize (that would typically be something you do in a view when sending to a template) method and there is other stuff in there like records and localStorage which is non-default so I take it the code above is not complete? — Dominic
@DominicTobias for 2nd point that is all I have in both models. I have not yet did anything fancy in it yet. — Harry Joy
@DominicTobias interesting thing is when I print same on App.on('start', function(){...}) it prints like child {cid: "c2", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…} which actually seems correct. — Harry Joy

Maris Maris · Accepted Answer · 2014-08-11T06:35:44

extend is not defined in your BaseModel. I allways use Jquery extend method for those purposes. You can define it like this:

define([
    'backbone',
    'jquery'
],
function( Backbone, $) {
    'use strict';
    return Backbone.Model.extend({
        initialize: function() {
            console.log("BaseModel");
        },

        extend : function(obj){
           return $.extend(true, obj, this);
        },

        defaults: {}
    });
});

But actualy you can implement extend by your own(if you don't wish to use jquery extend method), it's pretty easy. All you need to transfer all fields and functions from one object to another.

Now you can use your base model like this:

BaseModel.extend({//...});

not able to extend model from different file in backbone.marionette with require.js

1 Answers