DynamicVM

by patelsan

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="https://raw.github.com/AdamPflug/Knockout.Programmatic/master/src/knockout.programmatic.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc2.js"></script>
<h1>
    &nbsp;</h1>
<h3 style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; text-align: center; ">
    Apartment Lease Agreement</h3>
<p>
    <span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; ">This Apartment Lease Agreement i</span><span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; ">s made between the Landlord<input id="prop1" type="text" /> and the Tenant <input id="prop2" type="text" />&nbsp;on this date <input type="text" id="prop3" />.</span><br style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; " />
    <br style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; " />
    <span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; ">The Tenant hereby agrees to rent the Apartment described as follows:</span><br style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; " />
    <br style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; " />
    <span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; ">Street Address:&nbsp;<input size="65" type="text" id="prop4" /></span><br style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; " />
    <br style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: left; " />
    <span style="color: rgb(0, 0, 0);...

CoffeeScript

class VMHelper
 CreateVM: () =>
  vm = {'name' : 'DynoVM'}
  
  for i in [1..5]
   vm['prop' + i] = 'I am ' + i
  return vm
   
#helper = new VMHelper()
#formVM = helper.CreateVM()
#console.log(formVM)
#console.log(formVM['prop1'])
   
jQuery ->
 console.log('Ready')
 helper = new VMHelper()
 viewModel = helper.CreateVM()
 
 for prop of viewModel
  $("#" + prop).databind({ value: viewModel[prop], valueUpdate: 'afterkeydown'})