0

MyView.js:

define(['app/models/MyModel'],
    function (MyModel) {
        return Mn.LayoutView.extend({
            template: '#my-template',
            className: 'my-classname',
            regions: {
                content: '.content-region',
                panel: '.panel-region'
            }
            initialize: function () {
                _.bindAll(this, 'childButtonClicked');
            },
            onShow: function () {
                this.getRegion('content').show(new AnotherView());
            },
            childEvents: {
                'some-child-click': 'childButtonClicked'
            },
            childButtonClicked: function (view) {
                var newView = new MyView({
                    model: new MyModel({
                        title: view.model.get('title')
                    })
                });
                this.getRegion('panel').show(newView);
            }
        });
    });

I'm trying to nest instances of MyView within itself. This worked correctly when I was building the prototype by dumping everything into one function, like so:

var MyView = Mn.LayoutView.extend({
  ...
  childButtonClicked: function(view) {
    var newView = new MyView({
    ...

Now that I'm trying to separate the Views into their own files and use require.js, I can't figure out the syntax for a self-referential view.

When I run this code as is, I get an error like 'MyView is undefined'.

If I add it to the require header like so:

define(['app/models/MyModel', 'app/views/MyView'],
    function (MyModel, MyView) {

I get the error 'MyView is not a function'.

EDIT for solution:

The marked solution works fine, I ended up using the obvious-in-hindslght:

define(['app/models/MyModel'],
    function (MyModel) {
        var MyView = Mn.LayoutView.extend({
            template: '#my-template',
            className: 'my-classname',
            regions: {
                content: '.content-region',
                panel: '.panel-region'
            }
            initialize: function () {
                _.bindAll(this, 'childButtonClicked');
            },
            onShow: function () {
                this.getRegion('content').show(new AnotherView());
            },
            childEvents: {
                'some-child-click': 'childButtonClicked'
            },
            childButtonClicked: function (view) {
                var newView = new MyView({
                    model: new MyModel({
                        title: view.model.get('title')
                    })
                });
                this.getRegion('panel').show(newView);
            }
        });
        return MyView;
    });
Nathan Spears
  • 1,657
  • 8
  • 23
  • 31

1 Answers1

2

You can require() in your module: var MyView = require(app/views/MyView);.

So for want of a better place:

childButtonClicked: function (view) {
    var MyView = require(app/views/MyView);
    var newView = new MyView({
        model: new MyModel({
            title: view.model.get('title')
        })
    });
    this.getRegion('panel').show(newView);
}
Adrian Lynch
  • 8,237
  • 2
  • 32
  • 40