Personal Details - component

boot-index.js

var PersonalDetailsForm = require('personal-details');

var personalDetailsFormEl = document.querySelector('.js-personal-details-form');
if(personalDetailsFormEl) {
  var data = document.querySelector('.js-personal-details-data');
  new PersonalDetailsForm(personalDetailsFormEl, data);
}

index.html

<script type="text/json" class="js-personal-details-data">
    @Html.Raw(Model.ToJson())
</script>

<form class="js-personal-details-form">...</form>

personal-details-index.js

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

function PersonalDetailsForm(el, data) {
  this.el = el;
  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);
}

module.exports = PersonalDetailsForm;

https://gist.github.com/chrisbuttery/8796421#file-personal-details-index-js-L8

I'd probably parse it in boot so the view just gets an object of data.

But other than that, looks smokin'!