Which Function Of A View Gets Executed First? Initialize Or Render?

I inserted three console.log into the following code, which is from the tutorial Your First Backbone.js App. My question is: why console.log(this.el) shows the element's innerHtml

Solution 1:

initialize is always called first as it's inside the default Backbone's view constructor.

render is called whenever you manually call it.

services.each(function(service) {

    // ServiceView 'initialize' is called here.
    var view = new ServiceView({ model: service });
    // ServiceView 'render' is called here.
    this.list.append(view.render().el);

}, this);

Why the console shows the el before rendering?

In fact, the console doesn't show the element before rendering, but it is evaluated when you check it in the console.

Here's a simple example:

var myObject = {};

console.log(myObject);

myObject.test = "value";

If you had to guess, you'd say that an empty object is logged and you wouldn't be totally wrong.

The little blue ! says:

Object value at left was snapshotted when logged, value below was evaluated just now.

As mentioned by "mu is too short",

the console contains live references and doesn't copy anything. So when you get to the console to look at this.el, it shows you what this.el is right now rather than what it was when console.log(this.el) was evaluated.