ko-autobind Bind by Name Example
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="https://raw.github.com/phototom/ko-autobind/bffb176062af0a779e5328cb9797607c012f8f9a/ko-autobind.js"></script>
<table id='fromatMe'>
<thead>
<tr>
<td>
</td>
<td>
"Autobind" Objects
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="editor-label">
<label for="CheckBoxTest">
Checkbox Binding</label>
</td>
<td class="editor-field">
<input class="check-box" id="CheckBoxTest" name="CheckBoxTest" type="checkbox" value="false"><input
name="CheckBoxTest" type="hidden" value="false">
</td>
</tr>
<tr>
<td class="editor-label">
<label for="IntegerTest">
Integer Binding</label>
</td>
<td class="editor-field">
<input class="text-box single-line" id="IntegerTest" name="IntegerTest" type="text"
value="0" data-bind="value: myModel.IntegerTest ">
</td>
</tr>
<tr>
<td class="editor-label">
<label for="RadioButtons">
RadioButtons</label>
</td>
<td class="editor-field">
<div>
1:
<input id="RadioButtons" name="RadioButtons" type="radio" value="2" data-bind="value: myModel.RadioButtons "></div>
<div>
2:
...
CSS
table{border:1}
td{border:1px solid darkgray; padding:4px; vertical-align:top }
JavaScript
var model = '{"CheckBoxTest":false,"IntegerTest":88,"RadioButtons":2,"SelectTest":1,"StringTest":"Hi There"}'
var defaultoptionsArray = [{
elementType: 'input',
attrName: 'type',
attrValue: 'checkbox',
bindingType: 'checked'}];
var t = ko.mapping.fromJSON(model);
var viewModel = {};
viewModel.myModel = t;
ko.autoBind('#fromatMe', 'myModel.');
ko.applyBindings(viewModel);