主干视图无法使用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

Answer 1

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.

Answer 2

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;
});

Answer 3

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()
        }
});