Helper to render a view based on a backbone-model.

Usage no npm install needed!

<script type="module">
  import backboneModelView from '';



This is a tiny module to ease the construction of views in backbone.

I'm a fan of using no template engine for dynamically rendering a view in backbone for gaining better performance. This helper takes a little bit of the boilerplate. Use it with browserify.


$ npm install backbone-model-view


$ git clone git://
$ cd backbone-model-view/
$ npm install
$ npm test


var View = require('backbone-model-view');

var MyView = Backbone.View.extend({
  el: '#my-view',
  template: '<h1 data-text="title"></h1>',

  initialize: function() {
    this.el.innerHTML = this.template;
    this.view = View(this.el, this.model);

  render: function() {
      .map('data-text', function(el, name, value) {
        el.textContent = value;

Notice that the mapping is only applied to changed model-properties. If the property hasn't changed the function isn't called. So multiple calls to .render() without changed data do nothing.


BackboneModelView#map(attr, fn)

Searches for all elements with the attribute attr and applies fn to it. But this is only done if the model-property with the name of the value of the attribute has been changed.

BackboneModelView#mapOnce(attr, fn)

Does the same as #map() but searches only the first element and maps it.