Knockout Conversion to VueJS

Running as knockout code

by Ben Clayton

HTML

<link href="https://staging-homebuyingexpert.holograph.digital/css/skin.min.css?md5=cfe6e3e97270204e3c97a4e42fdcf126" rel="stylesheet" media="all" />
		<link href="https://staging-homebuyingexpert.holograph.digital/css/mobile-skin.min.css?md5=47e265ae7c1715af4e915a16e6227a5e" rel="stylesheet" media="all" />
		<link href="https://staging-homebuyingexpert.holograph.digital/css/print.min.css?md5=32080ecc34bfbb83ba9a1481e43db3c2" rel="stylesheet" media="print" />


		<!--[DYNAMIC_SCRIPTS]-->
		<script src='https://staging-homebuyingexpert.holograph.digital/script/knockoutjs/knockout-3.2.0.js' type='text/javascript'></script>

		<script src='https://staging-homebuyingexpert.holograph.digital/script/infx-form-editor-support.js?md5=3ce60282bab7ef9a80a7665f9fa75a32' type='text/javascript'></script>

		<!-- +=+=+=+=+=+=+=+=+=+=+=+=+=+=+ Form created by Flow PageEditor +=+=+=+=+=+=+=++=+=+=+=+=+=+=+= -->
		<div class='infx-form-shell'>
		  <form data-bind="submit: btnSubmit" name='form-1' id='form-1' class='infx-form form-1 ' method='post' action='/cgi-bin/infxsystem/send.pl' enctype='' target='_self'>

		    <input class='form-hidden' type='hidden' name='InfoPlease' value='' />


		    <div data-bind="html: system_message, visible: system_message() != '', css: { 'error-state': error_state } " class="infx-message-wrapper ">
		    	
		    </div>
		    <!-- CHECK BOXES What credit problems have you had? -->
		    <div class='infx-table-row checkboxes normal full '>
		      <div class='infx-table-data form_label'>What credit problems have you had?</div>
		      <div class='infx-table-data form_input label-after' data-bind="css:{ myinvalid: credit_problem.myinvalid() }">
		        <div class='infx-inline-data form_checkbox idx0'>
		          <input data-bind="{checked: credit_problem_missed_payments, css:{ dirty: credit_problem_missed_payments.dirty(),myinvalid: credit_problem_missed_payments.myinvalid() }}" title='What credit problems have you had? - Missed Payments'...

JavaScript

function viewModel_1() {
				  var _self = this;

				  _self.system_message = ko.observable('');
				  _self.error_state = ko.observable(false);

				  // ---- form controls ----
				  _self.credit_problem = ko.observable('').extend({
				    controlclass: null
				  });
				  _self.credit_problem_missed_payments = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_problem_defaults = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_problem_county_court_judgement = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_problem_debt_management_plan = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_problem_bankruptcy = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_problem_reposession = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_problem_none = ko.observable(false).extend({
				    controlclass: _self.credit_problem
				  });
				  _self.credit_probem_details = ko.observable('').extend({
				    controlclass: null
				  });
				  // -----------------------
				  // -----------------------
				  // schema for js validation and perl validation
				  _self._jschema = {
				    "$schema": "http://json-schema.org/draft-04/schema#",
				    "additionalProperties": false,
				    "description": "A InFX Flow Form v1.0 created by PageEditor v8.4",
				    "properties": {
				      "credit_problem": {
				        "maxlength": null,
				        "type": "string"
				      },
				      "credit_probem_details": {
				        "maxlength": null,
				        "type": "string"
				      }
				    },
				    "required": [],
				    "title": "Form /test-folder/example-of-conditional-fieldset/index.shtml",
				    "type": "object"
				  };
				  // Fields
				 ...