Backbone.js - How should a View update multiple HTML elements?

Question

Given the following HTML

<div id="outer">
  <div id="innerA"></div>
  <div id="innerB"></div>
  <div id="innerC"></div>
</div>

Should a View's render method update each element individually, ignoring the parent (outer) div:

MyView = Backbone.View.extend({
  model: null,

  initialize: function(options) {
    var self = this;
    this.model = options.model;
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  render: function() {
    var self = this;
    $('#innerA').html(this.model.get('A'));
    $('#innerB').html(this.model.get('B'));
    $('#innerC').html(this.model.get('C'));
  },
});

Or should it write HTML and values:

MyView = Backbone.View.extend({
  el: '#outer',
  model: null,

  initialize: function(options) {
    var self = this;
    this.model = options.model;
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  render: function() {
    var self = this;
    var element = jQuery(this.el);
    element.html('');
    element.append('<div id="innerA">' + this.model.get('A') + '</div>');
    element.append('<div id="innerB">' + this.model.get('B') + '</div>');
    element.append('<div id="innerC">' + this.model.get('C') + '</div>');
    return this.el;
  },
});

Or should it create nested models and views to delegate rendering:

MyView = Backbone.View.extend({
  model: null,

  initialize: function(options) {
    var self = this;
    this.model = options.model;
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

  render: function() {
    var self = this;

    var modelA = new ModelA();
    modelA.set({
      value: this.model.get('A'),
    });
    var viewA = new ViewA({
      model: modelA
    });

    // Assume ViewA renders '<div id="innerA"></div>'
    $('#innerA').html(viewA.render().html());

    // Rinse and repeat for B and C.
  },
});

score 0 · Accepted Answer · edited May 23 '17 at 12:32

This totally depends on the content of #innerA,#innerB,#innerC etc.

If those are independent functionalities with their own collection/model where they update & retrieve data, it's better to keep them as separate view's. They'll completely handle their functionalities, where the parent view will simply control actions such as their creation, deletion etc.

In the case of your first two example, all of these seems to be using the same model and is just printing single attribute. There is no need to create separate views. The rendering is commonly handled by using a template engine like underscores template method:

MyView = Backbone.View.extend({
  template: _.template($('#temp').text()),
  initialize: function(options) {
    this.listenTo(this.model, 'change', this.render);
    this.render();
  },
  render: function() {
    this.$el.append(this.template(this.model.toJSON()));
  }
});
var view = new MyView ({
 model: new Backbone.Model(),
 el: $('#outer')
});

<div id="outer">
</div>
<script type="text/template" id="temp">
  <div id="innerA"><%=A%></div>
  <div id="innerB"><%=B%></div>
  <div id="innerC"><%=C%></div>
</script>

In case #innerA, #innerB, #innerC where 3 independent functionalities, You'll have 4 views with the parent view creating all the 3 child views and appends to it as part of it's rendering.

Side notes:

Backbone will automatically set model & collection options to the view if present, no need to do this manually
We generally don't use global selectors like $('#innerA') within a view (ignore the template selector for demo purpose). Always limit DOM access within the view like this.$('#innerA') (alias for this.$el.find('#innerA'))
Read this answer regarding the other changes I've made.

I couldn't use Underscore.js templates because my code was running inside a Chrome Extension. However your answer did answer my question and I used Mustache templates instead. — Jack, Dec 28 '15 at 21:20
@DivyeshKanzariya that is usually done to keep a reference to the current context, but I can't find it in my answer above..? — T J, Mar 08 '16 at 12:51
Hmm I read some blogpost about it refer current object context — Divyesh Kanzariya, Mar 08 '16 at 13:15

Backbone.js - How should a View update multiple HTML elements?

1 Answers1