Vanilla Examples

a.js

var i, len, list, main, item;

var onItemClicked = function (e) {
  var i = 0, len = devices.length;

  for(i = 0; i < len; i++) {
    if(devices[i].name === e.target.innerText) {
      devices[i].status = (devices[i].status === 'in') ? 'out' : 'in';
      console.log(devices[i].status);
    }
  }
};

main = document.getElementById('devices');
list = main.getElementsByClassName('list');

if(list.length !== 0) {
  len = devices.length; 
  for(i = 0; i < len; i++) {
    item = document.createElement('li'); 
    item.innerText = devices[i].name;
    item.addEventListener('click', onItemClicked);

    list[0].appendChild(item);
  }
}

b.js

(function () {
  var i, len, list, main, item;
  
  var onItemClicked = function (e) {
    var i, len;

    len = devices.length;
    for (i = 0; i < len; i++) {
      if (devices[i].name === e.target.innerText) {
        devices[i].status = (devices[i].status === 'in') ? 'out' : 'in';
        console.log(devices[i].status);
      }
    }
  };

  main = document.getElementById('devices');
  list = main.getElementsByClassName('list');

  if (list.length !== 0) {
    len = devices.length;
    for (i = 0; i < len; i++) {
      item = document.createElement('li');
      item.innerText = devices[i].name;
      item.addEventListener('click', onItemClicked);

      list[0].appendChild(item);
    }
  }
}());

c.js

(function (global) {
  'use strict';

  var DeviceManager = function (el) {
    this.el = el;
  }

  var p = DeviceManager.prototype;

  p.onItemClicked = function (e) {
    var i, len;

    len = devices.length;
    for (i = 0; i < len; i++) {
      if (devices[i].name === e.target.innerText) {
        devices[i].status = (devices[i].status === 'in') ? 'out' : 'in';
        console.log(devices[i].status);
      }
    }
  };

  p.initialize = function () {
    var i, len, list, item;
    
    list = this.el.getElementsByClassName('list');

    if (list.length !== 0) {
      len = devices.length;
    
      for (i = 0; i < len; i++) {
        item = document.createElement('li');
        item.innerText = devices[i].name;
        item.addEventListener('click', this.onItemClicked);

        list[0].appendChild(item);
      }
    }
  };

  global.DeviceManager = DeviceManager;
}(window));

var dm = new DeviceManager(document.getElementById('devices'));
    dm.initialize();

d.js

(function (global) {
  'use strict';

  var DeviceList = function (el) {
    this.el = el;
    this.el.addEventListener('click', this.onItemClicked);
  };

  var p = DeviceList.prototype;

  p.onItemClicked = function (e) {
    console.log(e);
  };

  p.list = function (data, tmpl) {
    data.forEach(function (obj) {
      this.el.appendChild(tmpl(obj));
    }.bind(this));
  };

  global.DeviceList = DeviceList;
}(window));

var dm = new DeviceList(document.getElementById('devices'));

// Pass in data with a decorator.
dm.list(devices, function (obj) {
  var li = document.createElement('li');
      li.innerText = obj.name;

  return li;
});

data.js

var devices = [
 { name : 'iphone 3g', status : 'in', type : 'phone'},
 { name : 'iphone 3gs', status : 'in', type : 'phone'},
 { name : 'iphone 4', status : 'in', type : 'phone'},
 { name : 'iphone 4s', status : 'in', type : 'phone'},
 { name : 'iphone 5', status : 'in', type : 'phone'},
 { name : 'ipad 1', status : 'in', type : 'tablet'},
 { name : 'ipad 2', status : 'in', type : 'tablet'},
 { name : 'ipad 3', status : 'in', type : 'tablet'}
];