Knockout JS mapping plugin without initial data / empty form
http://stackoverflow.com/questions/6735225/knockout-js-mapping-plugin-without-initial-data-empty-form
by rniemeyer
HTML
<script src="http://knockoutjs.com/downloads/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-1.1.2.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<ul data-bind="template: { name: 'personTmpl', foreach: people }"></ul>
<script id="personTmpl" type="text/html">
<li>
<input data-bind="value: name" />
<input data-bind="value: role" />
</li>
</script>
CSS
input { margin: 2px; width: 75px; }
JavaScript
var originalData = {
people: [
{ name: "Bob", role: "Admin" },
{ name: "Randy" },
{ name: "Sue" }
]
};
var mappingOptions = {
people: {
create: function(options) {
options.data.role = options.data.role || "Default";
return ko.mapping.fromJS(options.data);
}
}
};
var viewModel = ko.mapping.fromJS(originalData, mappingOptions);
ko.applyBindings(viewModel);