Home/ Questions/Q 8768129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:59:34+00:00

I am trying to use templating to render a view initially, but to update

  • 0

I am trying to use templating to render a view initially, but to update the view on subsequent calls when it is part of the document.

My app’s page looks a little something like

<body>
  <!-- ... -->
  <div id="view_placeholder"/>
  <!-- ... -->
</body>

And in pseudo-code I want to do something like so

Backbone.View.extend({
  // ...
  render: function() {
    if (this.el *IS NOT A CHILD OF document*) {
      // render the contents from the template
    } else {
      // update the content visibility based on the model
    }
  },
  // ...
});

The reason for this is that the template contains quite a lot of nodes and regenerating it for every change is not practicable.

I have explored some of the data-binding libraries, e.g. rivets.js but they are a poor fit to the template:model relation.

One thing I noticed is that this.el.parentNode==null before I add it to the document, but I am not sure that this is a definitive test, and in any case if I wrap this view within another, then that test becomes less useful (or maybe I am being overly cautious as once within another view’s el I have rendered my sub-template anyway.

Another option I can see is to use a field to track the rendered status, e.g.

Backbone.View.extend({
  //
  templateRendered:false,
  // ...
  render: function() {
    if (!this.templateRendered) {
      // render the contents from the template
      this.templateRendered = true;
    } else {
      // update the content visibility based on the model
    }
  },
  // ...
});

but that feels hacky to me.

So my question is:

What is the best way to track the fact that I have rendered the template fully and therefore only need to tweak the rendered template rather than re-render it (and re-insert all the sub-views)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the idiomatic backbone approach is to only call a full render() on your view when you want a full render, and use model change event bindings to call sub-render functions that render smaller portions of the view.

    var AddressView = Backbone.View.extend({
    initialize: function (options) {
        Backbone.view.prototype.initialize.call(this, options);
        _.bindAll(this)
        options.model.on('change:name', this.renderName);
        options.model.on('change:street', this.renderStreet);
        options.model.on('change:zipCode', this.renderZipCode);
    },
    renderName: function (model) {
        this.$el.find("#name").text(model.get("name"));
    },
    renderZipCode: function (model) {
        this.$el.find("#zipcode").text(model.get("zipCode"));
    },
    renderStreet: function (model) {
        this.$el.find("#stree").text(model.get("street"));
    },
    render: function () {
        //Populate this.el with initial template, subviews, etc
        //assume this.template is a template function that can render the main HTML
        this.$el.html(this.template(model));
        this.renderName(this.model);
        this.renderZipCode(this.model);
        this.renderStreet(this.model);
        return this;
    }
});

    Code as above is undoubtedly tedious. I would reconsider knockback.js or rivets.js, personally, but I believe the pattern above is the canonical vanilla backbone.js approach.

    • 0