Mobx autorun example

Shows mobx.autorun and how it only updates when a field it's using is changed author(s): Matt Ruby

by Matt Ruby

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://unpkg.com/[email protected]/lib/mobx.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script src="https://rawgit.com/mattruby/mobx-examples/master/logging-utils.js"></script>
<script>
	wrapConsole();
</script>

JavaScript

var person = mobx.observable({
	firstName: 'Matt',
	lastName: 'Ruby',
	age: 0
});

var person2 = mobx.observable({
	firstName: 'Matt',
	lastName: 'Ruby',
	age: 0
});

// process the change
mobx.autorun(function auto_firstNameAge () {
	person2.age = person.age + 100;
});

mobx.autorun(function auto_firstNameAge () {
	console.log('person: ' + person.age);
});

mobx.autorun(function auto_firstNameAge () {
	console.log('person2: ' + person2.age);
});

// this will print Matt NN 10 times
_.times(10, function () {
	person.age = _.random(40);
});

// this will print nothing
_.times(10, function () {
	person.lastName = _.random(40);
});