Question

Began restructuring my Backbone app referencing this article by Bocoup: http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules

I’m having trouble initializing the views as defined in the module.

See this jsfiddle: http://jsfiddle.net/nicksergeant/8L6JX/

My application.js:

// Memoizing technique from http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules
var sidepros = {
    // Create this closure to contain the cached modules
    module: function() {
        // Internal module cache.
        var modules = {};

        // Create a new module reference scaffold or load an
        // existing module.
        return function(name) {
            // If this module has already been created, return it.
            if (modules[name]) {
                return modules[name];
            }

            // Create a module and save it under this name
            return modules[name] = { Views: {} };
        };
    }()
};

// Using the jQuery ready event is excellent for ensuring all 
// code has been downloaded and evaluated and is ready to be 
// initialized. Treat this as your single entry point into the 
// application.
jQuery(function($) {

    if ($('body').hasClass('apply')) {
        sidepros.app = new sidepros.module('apply').Views.AppView();
    }

});

The module, apply.js:

(function(Apply) {

    App = sidepros.app;

    Apply.FieldModel = Backbone.Model.extend({
        group: null
    });
    FieldView = Backbone.View.extend({
        initialize: function() {
            this.model = new FieldModel({
                group: $(this.el).parents('div.group').attr('id')
            });
            this.model.view = this;

            this.$tooltip = $('div.tooltip', $('#' + this.model.get('group')));
        },
        events: {
            'focus': 'focused',
            'blur' : 'blurred',
            'keyup': 'updateTooltip'
        },
        focused: function() {
            App.$tooltips.hide();
            this.$tooltip.show();
        },
        blurred: function() {
            App.$tooltips.hide();
        },
        updateTooltip: function() {
            if (this.model.get('group') == 'name') {
                short_name = $.trim(App.$first_name.val() + ' ' + App.$last_name.val().charAt(0));
                if (short_name !== '') {
                    short_name = ': ' + short_name;
                }
                App.$name_preview.text($.trim(short_name));
            }
        }
    });

    AppView = Backbone.View.extend({
        el: '#app',

        initialize: function(opts) {
            $('input, select, textarea', this.el).each(this.addField);

            this.$first_name   = $('input#id_first_name', this.el);
            this.$last_name    = $('input#id_last_name', this.el);
            this.$name_preview = $('strong#name-preview', this.el);
            this.$tooltips     = $('div.tooltip', this.el);
        },
        addField: function() {
            model = new FieldView({ el: this });
        }
    });

    Apply.Views = {
        'AppView': AppView,
        'FieldView': FieldView
    };

})(sidepros.module('apply'));

When attempting to init the AppView like so:

sidepros.app = new sidepros.module('apply').Views.AppView();

I get the error:

Uncaught TypeError: Object #<Object> has no method '_configure'

Answer 1

You are getting that error because Javascript is getting confused about the context of your constructor function. If you step into your AppView constructor, the context is Apply.Views, which means the new operator hasn’t been called yet.

To get rid of that error, you need to do one of the following:

    var appView = sidepros.module('apply').Views.AppView;
    sidepros.app = new appView();

OR

    sidepros.app = new (sidepros.module('apply').Views.AppView)();

Beyond that, I am not exactly sure what you are trying to do. There are no input, select or textarea nodes in your jsFiddle, so I can’t say for sure what your next problem is.

In addition, this line model = new FieldView({ el: this }): feels really odd to me. Why are you setting your model to your view in the addField function?

I think a new jsFiddle is necessary to debug further.