knockout.mapper.js
Version:
Knockout.js plugin for object mapping including validation.
78 lines (70 loc) • 2.26 kB
HTML
<html>
<head>
<script src="../node_modules/knockout/build/output/knockout-latest.js"></script>
<script src="../knockout.mapper.js"></script>
</head>
<body>
<div id="form-panel">
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: name"></strong></p>
<p>Name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">Go caps</button>
</div>
<script type="text/javascript">
var obj = {};
obj.statics = {
"prop": "val"
};
obj.dataModel = {
firstName: "Planet",
lastName: "Earth",
friends: [ "Saturn", "Moon"],
environment: [ ],
fullName: function() {
return this.firstName() + " " + this.lastName();
},
name:{
read: function () {
return this.firstName() + " " + this.lastName();
},
write: function (value) {
var lastSpacePos = value ? value.lastIndexOf(" ") : 0;
if (lastSpacePos > 0) { // Ignore values with no space character
this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
}
},
owner: this
}
};
obj.methods = {
capitalizeLastName: function() {
var currentVal = this.lastName();
this.lastName(currentVal.toUpperCase());
},
init: function(){
console.log('Helloka!', this.lastName());
}
};
obj.validation = {
firstName: { required: true, type: "alphanum" },
lastName: { notblank: true, type: "alphanum" }
};
var viewModel = {};
ko.mapObject( viewModel, obj.dataModel, obj.validation, obj.methods, obj.statics );
ko.applyBindings( viewModel );
setTimeout( function(){
obj.dataModel.firstName = "Universe";
obj.dataModel.environment = [ {name:"Sun", distance:150}, {name:"Neptun", distance:4.5} ];
ko.updateViewModel( viewModel, obj.dataModel );
console.log( ko.toJSONByPrototype( viewModel, obj.dataModel ) );
}, 3000 );
setTimeout( function(){
ko.resetViewModel( viewModel );
}, 6000 );
</script>
</body>
</html>