Using reactive to populate a list of user data

index.html

<form>
  <div class="js-formItem">
    <input type="text" value="{fullName}"></input>
    <input type="text" value="{HomePhone || '555 555 555'}"></input>
  </div>
</form>

index.js

module.exports = function(){
  var reactive = require('reactive');
  var Emitter = require('emitter');

  var obj = {
    "Customers": [
      {
        "FirstName": "Ali",
        "Surname": "Rad",
        "HomePhone": "02 4991 2111"
      },
      {
        "FirstName": "Chadia",
        "Surname": "Rad",
        "HomePhone": "02 4991 2111"
      },
      {
        "FirstName": "Farah",
        "Surname": "Rad",
        "HomePhone": "02 4991 2111"
      }
    ]
  };

  // get the template and hide it
  var tmpl = document.querySelector('.js-formItem');
  tmpl.parentNode.removeChild(tmpl);

  // the Constructor
  function Customer(model) {
    this.model = model;
  }

  // the Constructor view
  Customer.prototype.view = function(){
    var self = this;
    var el = tmpl.cloneNode(true);
    reactive(el, this.model, {
      fullName: function(){
        self.emit('joined name', self.model);
        return self.model.FirstName + ' ' + self.model.Surname;
      }
    });
    this.emit('added ', self.model.FirstName);
    return el;
  };

  Emitter(Customer.prototype);

  // Iterate the customers, create views and append
  obj.Customers.forEach(function(cust) {
    var customer = new Customer(cust);
    customer.on('joined name', function(data){
      console.log('data ', data);
    });
    document.body.appendChild(customer.view());
  });
};