javascript object composition syntax

Question

In the following code, I want to be able to call bindClickEvents() like so:

App.Utils.Modal.bindClickEvents();

However, I don't understand the syntax necessary to do this.

Current code:

var App = new Object;

App.Modal = {
  bindClickEvents: function() {
    return $('a.alert-modal').click(function(e) {
      return console.log('Alert Callback');
    });
  }
};

$(document).ready(function() {
  return App.Modal.bindClickEvents();
});

See this question: http://stackoverflow.com/questions/251402/create-an-empty-object-in-javascript-with-or-new-object — Alex Wayne, Jan 06 '12 at 06:51

score 3 · Accepted Answer · edited Jan 06 '12 at 05:19

You can do it in one go:

var App = {
  Modal : {
    bindClickEvents : function () {/* ... */}
  }
}

or if you want to break that up to separate steps:

var App = {};
App.Modal = {};
Modal.bindClickEvents = function () {/* ... */};

BTW, in reference to your original question title, this is not object chaining. This is object composition. Object chaining is being able to call methods in an object multiple times in a single statement.

score 2 · Answer 2 · answered Jan 06 '12 at 05:20

2

Is this what you're trying to do?

var App = {};

App.Utils = {};

App.Utils.Modal = {
  bindClickEvents: function() {
    return $('a.alert-modal').click(function(e) {
      return console.log('Alert Callback');
    });
  }
};

$(document).ready(function() {
  return App.Utils.Modal.bindClickEvents();
});

answered Jan 06 '12 at 05:20

Dagg Nabbit

75,346
19
113
141

I guess OP didn't *actually* want a Utils object in there :-) – Adam Rackis Jan 06 '12 at 16:58

Adam Rackis · Answer 3 · 2012-01-06T05:29:51.403

Prefer the object literal syntax to the Object constructor; some authors go so far as to call the latter an anti-pattern

Here's the simplest way to set up App.Utils.Modal.bindClickEvents();

var App = {
      Utils: {
           Modal: {
               bindClickEvents: function() {
                    return $('a.alert-modal').click(function(e) {
                        return console.log('Alert Callback');
                    });
               }
           }
      }
 };

Or you can piece it together one step at a time:

var App = {};
App.Utils = {};
App.Utils.Modal = {};
App.Utils.Modal.bindClickEvents = function() {
    return $('a.alert-modal').click(function(e) {
      return console.log('Alert Callback');
    });
};

javascript object composition syntax

3 Answers3