RequireJS/Backbone : inheritance of dependencies?

Question

Update : I've found a solution which is slighty the same as in the first answer. But in fact I'd like to know if there is a manner using RequireJS, to do that without using special var or parameters in views. Here is my solution :

define(['resthub', 'backbone', 'views/myModule/parent-view', 'views/myModule/a-view'],
function(Resthub, Backbone, ParentView, AView) {

    var ParentView = Backbone.View.extend({

        // Stuff before

        buildAView : function(aViewObject){
            var aView = aViewObject || AView;

            // Enought source code before and after those following lines
            // that I don't want to duplicate in ChildView
            this.aView = new aView();
            this.aView.render();
        }

        // Stuff after

    });

    return ParentView;
});

I try to use a maximum the inheritance in a Backbone project which dependencies are managed by RequireJS to avoid duplicate code. In fact, I create a new view that extend a base view. The base view has a dependency that I want to override. But even if i try to override, the original dependency is taken, instead of the new one. Note than I'm forced to inherit.

Here what I'm trying to do :

Base view I inherit :

define(['resthub', 'backbone', 'views/myModule/parent-view', 'views/myModule/a-view'],
function(Resthub, Backbone, ParentView, AView) {

    var ParentView = Backbone.View.extend({

        // Stuff before

        buildAView : function(){
            // Enought source code before and after those following lines
            // that I don't want to duplicate in ChildView
            this.aView = new AView();
            this.aView.render();
        }

        // Stuff after

    });

    return ParentView;
});

Then view i attempt to create. What I want is that buildAView() function takes the new dependency called AView in b-view which contains not the same source code as in a-view.

define(['resthub', 'backbone', 'views/myModule/parent-view', 'views/myModule/b-view'],
function(Resthub, Backbone, ParentView, AView) {

    var ChildView = ParentView.extend({

        // Stuff before

        render: function() {

            ParentView.__super__.render.apply(this, []);

            /* some stuff inbetween*/

            this.buildAView();
        }

    });

    return ChildView;
});

Thanks :)

score 0 · Answer 1 · answered Aug 19 '13 at 18:32

The problem is that AView is bound to the function it was injected, so when you call the buildAView it use the AView that was injected into the ParentView module. But there is a simple way to fix the problem. Just save AView as property of your view.

define(['resthub', 'backbone', 'views/myModule/parent-view', 'views/myModule/a-view'],
function(Resthub, Backbone, ParentView, AView) {

    var ParentView = Backbone.View.extend({

        // Stuff before
        AView: AView,

        buildAView : function(){
            // Enought source code before and after those following lines
            // that I don't want to duplicate in ChildView
            this.aView = new this.AView();
            this.aView.render();
        }

        // Stuff after

    });

    return ParentView;
});

define(['resthub', 'backbone', 'views/myModule/parent-view', 'views/myModule/b-view'],
function(Resthub, Backbone, ParentView, AView) {

    var ChildView = ParentView.extend({

        // Stuff before
        AView: AView,

        render: function() {

            ParentView.__super__.render.apply(this, []);

            /* some stuff inbetween*/

            this.buildAView();
        }

    });

    return ChildView;
});

I figured out it was a problem of scope. In fact, I wanted to know if there was another way, using RequireJS, to do that without a var containing my AView ? Since my answer I've been working on a similar way you propose : buildAView function can receive a parameter, that is used in place of AView object if given in ParentView, otherwise, original AView from ParentView's define is used. See my original post. — Steph0, Aug 20 '13 at 08:28

RequireJS/Backbone : inheritance of dependencies?

1 Answers1