personal-details-index.js

var reactive = require('reactive');
var Observable = require('observable');
var Emitter = require('emitter');
var Form = require('form');

function PersonalDetailsForm(el, data) {
  this.el = el;
  this.tmpl = this.el.querySelector('.js-template');
  this.tmplContainer = this.el.querySelector('.js-template-container');

  this.model = new Observable();
  this.model.set(JSON.parse(data.innerHTML));
  this.bindings = reactive(this.el, this.model, this);
  this.form = new Form(this.el);

  // 'logged in' user
  this.selectedCustomerId = this.model.attributes.SelectedCustomerId;

  // load a customer
  this.loadCustomer();
  this.model.on('change:customerSelect', this.loadCustomer.bind(this));
}

Emitter(PersonalDetailsForm.prototype);

// Find a customer by ID
PersonalDetailsForm.prototype.find = function(id){
  var customers = this.model.attributes.Customers;
  for(var i = 0; i < customers.length; i++){
    if (customers[i].CustomerNumber === id){
      return customers[i];
    }
  }
};

// Render a view of the selected customer and template
PersonalDetailsForm.prototype.renderView = function(){
  var self = this;
  var el = this.tmpl.cloneNode(true);
  var model = new Observable();
  model.set(this.customer);
  reactive(el, model, {
    fullName: function(){
      return self.customer.FirstName + ' ' + self.customer.Surname;
    }
  });
  this.emit('rendered customer');
  return el;
};

/**
 * Set the customer to and id or use the selectedCustomerId intially
 * Clear template container and render the view
 */
PersonalDetailsForm.prototype.loadCustomer = function(id){
  this.customer = (id) ? this.find(id) : this.find(this.selectedCustomerId);
  this.tmplContainer.innerHTML = "";
  this.tmplContainer.appendChild(this.renderView());
};

module.exports = PersonalDetailsForm;

template.html

<form action="">
    <select 
        class="t-customer-dropdown" 
        data-message-align="center" 
        data-message-position="south" 
        data-model="customerSelect" 
        name="SelectedCustomerId" 
        tabindex="1"
    >
        <option selected="selected" value="21857276">Mr Ali Rad</option>
        <option value="22995512">Mrs Chadia Rad</option>
        <option value="28013730">Miss Farah Rad</option>
    </select>

    <div class="js-template-container">
        <!-- repopulate this template will a model -->
        <div class="js-template">
            <div class="form__row cf">
                <div class="control control-text--inline">
                    <label class="control__label">Name:</label>
                    <input
                        data-message-align="center"
                        data-message-position="south"
                        data-model="FullName"
                        name="FullName"
                        tabindex="2"
                        type="text"
                        value=""
                    >
                </div>
            </div>

            <div class="form__row cf">
                <div class="control control-text--inline">
                    <label class="control__label">Date of Birth:</label>
                    <input
                        data-message-align="center"
                        data-message-position="south"
                        data-model="DateOfBirth"
                        name="DateOfBirth"
                        tabindex="3"
                        type="text"
                        value=""
                    >
                </div>
            </div>
        </div>
    </div>
    
    <!-- actions -->
</form>