Ko Mapping

KO Mapping doesn't work like people think it does

by Jason Butz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js+"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<p data-bind="text: valueOne"></p>
<p data-bind="text: valueTwo"></p>

<p>
    <strong>valueOne is Observable</strong>
    <span data-bind="text: ko.isObservable(valueOne) ? 'true' : 'false'"></span>
</p>

<p>
    <strong>valueTwo is Observable</strong>
    <span data-bind="text: ko.isObservable(valueTwo) ? 'true' : 'false'"></span>
</p>

JavaScript

class App {
	constructor(params) {
    	ko.mapping.fromJS(params, {
        	observe: ['valueOne']
        }, this);
    }
}

ko.applyBindings(new App({
	valueOne: 'Hello World',
    valueTwo: 'Foo Bar'
}));