Question

I have been looking at some code for a while now and can’t decide on the best practice to apply in this situation:

Let’s say that we have a view that has n-subviews. I have come across two practices for initializing them

1 Inside intitialize

initialize: function() {
  this.subViews = [];
  this.subViewModelCollection.each(function(model) {
    var view = new SubView({model: model});
    this.subViews.push(view);
    this.$el.append(view.el);
  }, this);
},

render: function() {
  _.invoke(this.subViews, 'render');
}

2 Inside render

initialize: function() {
  ... // render handles the subviews
},

render: function() {
  this.subViews = [];
  this.subViewModelCollection.each(function(model) {
    var view = new SubView({model: model}).render(); // render optional
    this.subViews.push(view);
    this.$el.append(view.el);
  }, this);
}

now these are just crude samples, but they demonstrate my dilemma. Should the initialize or the render -function be responsible for initializing the subviews? Personally I have been a strong advocate for the latter version, but some code I saw made me sway towards the former.

So, WHERE do you initialize your subviews, WHY do you do it there and WHY is it better than the other option?

Answer 1

You should maximize the amount of work you do in initialize, as that will only be done once, and minimize the amount of work you do in your render function which may typically be called many times (for instance in a single page application or responsive webpage).

If you know your render method for your subviews will never change the generated html, then you can probably also call the render method for the subviews in the initialize method as well, and simply appending the rendered element in the “main view”.

If the render methods for both your subviews and main view is only called once anyway (as part of loading a page or whatever) it probably does not matter how you do it, but generally minimizing the amount of work to be done in the render functions is probably good advice.