Mobx extendObservable example

Shows mobx's extendObservable feature author(s): 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://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 = function (firstName, lastName, age) {
	mobx.extendObservable(this, {
		firstName: firstName,
		lastName: lastName,
		age: age,
		fullName: function () {
			console.count('fullName');
			return this.firstName + ' ' + this.lastName;
			}
	});
};

var person = new Person('Matt', 'Ruby', 4);

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

mobx.extendObservable(person, { nickname: 'Ruby'});

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

person.firstName = 'Mike';
person.firstName = 'Lissy';
person.nickname = 'Red'