Component List. Is an example of using Arr.js. Require micromustache template engine, throttle.js utility.

List.js

var List = function(data, el, itemTamplate) {
  if (! data instanceof Arr) {
    throw new Error('data should be an instance of Arr');
  }

  if (! el instanceof HTMLElement) {
    throw new Error('el should be an instanceof of HTMLElement');
  }

  if (typeof itemTamplate !== 'string') {
    throw new Error('itemTamplate should be a string');
  }

  if (typeof micromustache === 'undefined') {
    throw new Error('micromustache (global) library is required');
  }

  if (typeof throttle === 'undefined') {
    throw new Error('throttle (global) library is required');
  }

  this.data = data;
  this.el = el;
  this.itemTamplate = itemTamplate;

  this.data.on('change', throttle(this.render.bind(this), 300));
  
  if (this.data.length > 0) {
    this.render();
  }
};

List.prototype = {
  //
  clean: function() {
    while (this.el.firstChild) {
        this.el.removeChild(this.el.firstChild);
    }

    return this;
  },

  //
  render: function() {
    this.clean();

    if (this.data.length > 0) {
      for (var i=0,len=this.data.length; i<len; i++) {
        this.el.insertAdjacentHTML('beforeend', micromustache.render(this.itemTamplate, this.data[i]));
      }
    }
    
    return this;
  }
};