Backbone views unable to extend using requirejs

Question

I am familiar with building backbone apps but am trying to convert it to use requirejs, the issue i am facing is when i am trying to extend the parent view, it is undefined

when trying to extend base-view.js to properties-view.js

 define(['backbone','underscore','jquery','views/node/base-view'],                  
   function(Backbone, _, $, NodeBaseView){
     PropertiesView = NodeBaseView.extend({

        });
     }
});

Instantiating a child view inside the parent base view

    define(['backbone','underscore','jquery','views/node/properites-view'], function(Backbone, _, $, PropertiesView){
    NodeBaseView = Backbone.View.extend({
    ..
        new PropertiesView({});
    ..
    });

});

Here NodeBaseView is undefined when trying to extend it for PropertiesView. Any Help?

Note: I am using AMD versions of backbone and underscore from here https://github.com/amdjs

Are you sure you're returning the view? as in return NodeBaseView; at the end. — gitaarik
– gitaarik, Commented Dec 18, 2013 at 8:38
possible that was the solution. i solved this error more than six months ago and unable remember now. — Gokul Kav
– Gokul Kav, Commented Dec 18, 2013 at 19:03

greim · Accepted Answer · 2013-03-18 17:03:11Z

3

The problem here appears to be a circular dependency. Base view requires properties view, and vice versa. This results in one of them being undefined.

answered Mar 18, 2013 at 17:03

greim

9,4676 gold badges36 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Gokul Kav Over a year ago

I understand that. However the regular version of backbone does not have this issue and extending views is one of the features. Any idea how I can fix this here

greim Over a year ago

Well, to be clear, unless I've totally misunderstood the question, the issue you're experiencing has nothing to do with Backbone. It's rather with how you're using require. Circular dependencies aren't allowed in AMD. (Someone correct me if I'm wrong.) Even if you weren't using require, it seems strange to me that a parent view would depend on a child view. Not trying to tell you what's best for your code, just saying I think there's valid reasons a dependency lib would disallow it. If it were me I'd work around the issue by simply using three views.

Gokul Kav Over a year ago

its the child view that wants to extend the parent view (not parent view extending the child view). Was wondering if anyone had experience using AMD with backbone and extended parent views to child views for using parent methods and event handling.

darksoulsong Over a year ago

@GokulKav I've got the very same situation here. Have you managed to solve it? So I'm unable to instantiate a child view from the parent? If not, how can I get the same behavior doing it in a different way?

backdesk Over a year ago

It's generally a limitation with the AMD format as per James Burke's comment here: stackoverflow.com/questions/4881059/…

|

backdesk · Accepted Answer · 2013-12-19 09:20:13Z

3

+50

Let's pretend this definition sits in 'views/main'

define(['backbone', 'views/node/base'],                          
    function(Backbone, BaseView){
        var MainView = BaseView.extend({

        });

        return MainView;
    }
);

Then as your child view:

define(['backbone', 'views/node/base'],                          
    function(Backbone, BaseView) {
        var PropertiesView = BaseView.extend({

        });

        return PropertiesView;
    }
);

Then somewhere else in a universe far far away:

myView = new MainView();

Using the example from the manual:

define(['backbone', 'views/node/base'],                          
    function(Backbone, BaseView){
        var MainView = BaseView.extend({

        });

        return MainView;
    }
);

Then

define(['backbone'], function (Backbone) {                  
  var BaseView;

  require(['views/node/base'], function(b){
      BaseView = b;
  });

  var PropertiesView = BaseView.extend({

  });

  return PropertiesView;
});

edited Dec 19, 2013 at 9:20

answered Dec 12, 2013 at 13:15

backdesk

1,7913 gold badges22 silver badges42 bronze badges

2 Comments

darksoulsong Over a year ago

In my case, yes, I am returning the "PropertiesView". It seems I'm not supposed to instantiate a child from the parent but I really can't think of another way to make the parent becomes aware of its child.

backdesk Over a year ago

There's nothing wrong with instantiating a child view from the parent in principle. You could alternatively use the CommonJS format or just require one of your views in. See redolent's example at: stackoverflow.com/questions/4881059/…

joseljmz · Accepted Answer · 2013-12-20 15:17:18Z

You could require PropertiesView dynamically so BaseView does not have to depend on it.

define(['backbone','underscore','jquery','views/node/base-view'],
   function(Backbone, _, $, NodeBaseView){
     PropertiesView = NodeBaseView.extend({

        });
     }
     return PropertiesView;
});

Here you require PropertiesView

define(['backbone','underscore','jquery'],
    function(Backbone, _, $, PropertiesView){
        NodeBaseView = Backbone.View.extend({
        ..
            var PropertiesView = require('views/node/properites-view');
        ..
            new PropertiesView({});
        ..
        });

});

Example:

define(['views/node/base-view', 'views/node/properites-view'],
    function(NodeBaseView, PropertiesView){
        return {
            base: new NodeBaseView()
        }
});

Collectives™ on Stack Overflow

Backbone views unable to extend using requirejs

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related