JSON Array that creates a form
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="json"></div>
<button id="showJSON">Show JSON</button>
<div data-bind="foreach: formData">
<div data-bind="foreach: data">
<h1 data-bind="text: $data.groupName"></h1>
<div data-bind="foreach: $data.content">
<p data-bind="text: $data.title"></p>
<!-- ko if: $data.formType == "select" -->
<select data-bind="options: $data.value, selectedOptions: $data.selected, optionsText: 'title', optionsValue: 'value', value: $data.selected "></select>
<!-- /ko -->
<!-- ko if: $data.formType == "textBox" -->
<div>
<!-- ko if: $data.appendLabel == true -->
<div class="input-append" >
<input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />
<span class="add-on" data-bind="text:$data.appendLabelText"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: $data.appendLabel -->
<input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: $data.formType == "checkbox" -->
<div data-bind="foreach:$data.value">
<p>
<input type="checkbox" data-bind="attr : { name: $data.title, checked: $data.checked }"/><span data-bind=" text:$data.title"></span>
</p>
</div>
<!-- /ko -->
</div>
</div>
</div>
<script>
$('#showJSON').click(function() {
formData = $.data(document.body, 'formData')
json = ko.toJSON(formData)
$('#json').html(json)
});
</script>
JavaScript
function appViewModel() {
var self = this;
self.formData = ko.observableArray();
self.formData.push({"data":
[
{
"groupName" : "Properties",
"content" :
[
{
"title" : "Calculation Method",
"formType" : "select",
"selected" : "2",
"value" :
[
{
"title" : "Voltage Drop - Unbalanced",
"value" : "1"
},
{
"title" : "Voltage Drop - Balanced",
"value" : "2"
}
]
},
{
"title" : "Tolerance (% V)",
"formType" : "textBox",
"value" : 0.01
},
{
"title" : "Calculation Options",
"formType" : "checkbox",
"value" :
[
{
"title" : "Flat Start (at Nominal Conditions",
"checked" : false
} ,
{
"title" : "Assume Line Transposition",
"checked" : true
}
]
},
{
"title" : "Adjust Conductor Resistance at",
"formType" : "textBox",
"disabled" : true,
"value" : 77,
"appendLabel" : true,
"appendLabelText" : "°F"
}
]
},
{
"groupName" : "Properties",
"content" :
[
{
"title" : "Calculation Method",
"formType" : "select",
"value" :
[
{
"title" : "Voltage Drop - Unbalanced",
"selected" : false
},
{
"title" : "Voltage Drop - Balanced",
"selected" : true
}
]
},
{
"title" : "Tolerance (% V)",
"formType" : "textBox",
"value" : 0.01
},
{
"title" : "Calculation Options",
"formType" : "checkbox",
"value" :
[
{
"title" : "Flat Start (at Nominal Conditions",
"checked" : false
} ,
{
"title" : "Assume Line Transposition",
"checked" : true
}
]
},
{
"title" : "Adjust Conductor Resistance...