Mobx map example

Shows mobx's map feature author(s): Matt Ruby

by cdeutsch

HTML

<div id="react-log"></div>




<script src="https://cdn.jsdelivr.net/g/[email protected](react.min.js+react-dom.min.js),[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://rawgit.com/mattruby/mobx-examples/master/logging-utils.js"></script>
<script>
	wrapConsole();
</script>

JavaScript

console.clear();

var person = mobx.observable({
	stats: mobx.map()
});

mobx.autorun(function () {
	console.log(person.stats.toJs(), person.stats['height']);
});

person.stats.set('height', 6);
person.stats.set('weight', 155);
person.stats.set('height', 6);
person.stats.set('height', '5 feet, 11 inches');
person.stats.set('height', 5);
person.stats.delete('height');

mobx.transaction(function () {
	person.stats.set('weight', 160);
	person.stats.set('height', 6);
	person.stats.set('height', '5 feet, 11 inches');
	person.stats.set('height', 5);
});