Box.js:BoxView.js

// -------------------------------------
// Box View Model
module.exports = Box;

/**
 * Box view model
 * @property {object} position A list of spacial coordinates
 * @property {number} width
 * @property {number} height
 * @constructor
 */
function Box(position, width, height)
{
  this.position = position;
  this.width    = width;
  this.height   = height;
}

/**
 * @param {object} p
 */
Box.prototype.setPosition = function(p)
{
  this.position = p;
};

/**
 * @param {number} w
 */
Box.prototype.setWidth = function(w)
{
  this.width = w;
};

/**
 * @param {number} h
 */
Box.prototype.setHeight = function(h)
{
  this.height = h;
};


// -------------------------------------
// Box View
module.exports = BoxView;

/**
 * Box view
 * @constructor
 */
function BoxView()
{
  this._started = false;
  this.context  = null;
  this.element  = null;
}

// Stringified HTML template
BoxView.TEMPLATE = require('path/to/box/template.html');

/**
 * Fire off our box view
 * @property {boolean} _started
 */
BoxView.prototype.init = function()
{
  this._started = true;
};

/**
 * @param {object} context
 */
BoxView.prototype.setContext = function(context)
{
  this.context = context;
};

/**
 * Do all the nasty view shit to create a DOM element for the box using its bound context properties
 */
BoxView.prototype.render = function()
{
  if (!this._started) this.init();

  var e = this.element;
 
  // Create the box DOM element if it doesn't exist yet
  if (!e) {
    var element       = document.createElement('div');
    element.className = 'box';
    element.innerHTML = BoxView.TEMPLATE;

    e = element;
  }

  // Update the CSS props
  e.style.width  = this.context.width;
  e.style.height = this.context.height;
  e.style.top    = this.context.position.top;
  e.style.left   = this.context.position.left;
};