How to use mobservable - 10 common examples
To help you get started, we’ve selected a few mobservable examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mobxjs / mobx-react / test / reactiveComponent.js View on Github 
exports.testIsComponentReactive = function(test) {
var component = observer({ render: function() {}});
test.equal(component.isMobservableReactObserver, true);
test.equal(mobservable.isObservable(component), false); // dependencies not known yet
test.equal(mobservable.isObservable(component.render), false); // dependencies not known yet
component.componentWillMount();
component.render();
test.equal(mobservable.isObservable(component.render), true); // dependencies not known yet
test.equal(mobservable.isObservable(component), false);
mobservable.extendReactive(component, {});
test.equal(mobservable.isObservable(component), true);
test.done();
}exports.testIsComponentReactive = function(test) {
var component = observer({ render: function() {}});
test.equal(component.isMobservableReactObserver, true);
test.equal(mobservable.isObservable(component), false); // dependencies not known yet
test.equal(mobservable.isObservable(component.render), false); // dependencies not known yet
component.componentWillMount();
component.render();
test.equal(mobservable.isObservable(component.render), true); // dependencies not known yet
test.equal(mobservable.isObservable(component), false);
mobservable.extendReactive(component, {});
test.equal(mobservable.isObservable(component), true);
test.done();
}exports.testIsComponentReactive = function(test) {
var component = observer({ render: function() {}});
test.equal(component.isMobservableReactObserver, true);
test.equal(mobservable.isObservable(component), false); // dependencies not known yet
test.equal(mobservable.isObservable(component.render), false); // dependencies not known yet
component.componentWillMount();
component.render();
test.equal(mobservable.isObservable(component.render), true); // dependencies not known yet
test.equal(mobservable.isObservable(component), false);
mobservable.extendReactive(component, {});
test.equal(mobservable.isObservable(component), true);
test.done();
}import mobservable from 'mobservable';
// Create a reactive data structure
export var todos = mobservable.fromJson([]);
// The following function will automatically be executed whenever 'todos' changes
mobservable.sideEffect(() => {
console.log("Completed %d of %d todo items", todos.filter(todo => todo.completed).length, todos.length)
});
addTodo("Find a clean mug");
// Prints: 'Completed 0 of 1 todo items'
addTodo("Make coffee");
// Prints: 'Completed 0 of 2 todo items'
todos[0].completed = true;
// Prints: 'Completed 1 of 2 todo items'
export function addTodo(title) {
todos.push(mobservable.fromJson({
title: title,import mobservable from 'mobservable';
// Create a reactive data structure
export var todos = mobservable.fromJson([]);
// The following function will automatically be executed whenever 'todos' changes
mobservable.sideEffect(() => {
console.log("Completed %d of %d todo items", todos.filter(todo => todo.completed).length, todos.length)
});
addTodo("Find a clean mug");
// Prints: 'Completed 0 of 1 todo items'
addTodo("Make coffee");
// Prints: 'Completed 0 of 2 todo items'
todos[0].completed = true;
// Prints: 'Completed 1 of 2 todo items'
export function addTodo(title) {
todos.push(mobservable.fromJson({
title: title,
completed: false
}));
}mouseHandler.Cborder = 'green';
mouseHandler.Ccolor = '#d5f765';
mouseHandler.Sbackground = '#000';
mouseHandler.Sborder = 'green';
mouseHandler.Scolor = '#d5f765';
}
}
});
data.ddChange1 = x => { data.dd1 = x };
data.ddChange2 = x => { data.dd2 = x };
data.ddChange3 = x => { data.dd3 = x };
data.ddChange4 = x => { data.dd4 = x };
data.ddChangeGoal2 = x => { data.goal2 = x };
let disp = mobservable.makeReactive({
rulesDisplayOn: 'none',
rulesDisplayOff: 'inline',
scoreDisplay: 'inline',
scoreDisplay2: 'none'
});
@observer class B2 extends React.Component {
// shouldComponentUpdate = shouldPureComponentUpdate;
constructor(props) {
super(props);
this.mouse = mouseHandler;
this.data = data;
this.disp = disp;
this.state = {
d1: 0,
d2: 0,import {makeReactive} from 'mobservable';
// Create a reactive data structure
var todoStore = makeReactive({
todos: [
{
title: 'Find a clean mug',
completed: true
},
{
title: 'Make coffee',
completed: false
}
],
completedCount: function() {
return this.todos.filter((todo) => todo.completed).length;
},
pending: 0
});<button>New Todo</button>
<button>Load more...</button>
);
},
onNewTodo: function() {
this.props.store.addTodo(prompt('Enter a new todo:', 'Try mobservable at home!'));
},
loadMore: function() {
this.props.store.loadTodosAsync();
}
}));
// React component that responds to changes in its 'todo'
var TodoView = reactiveComponent(React.createClass({
displayName: 'TodoView',
render: function() {
var todo = this.props.todo;
return (<li>
<input checked="{" type="checkbox">
{todo.title}{' '}
<a href="#">[edit]</a>
<a href="#">[remove]</a>
</li>);
},
onToggleCompleted: function() {
this.props.todo.completed = !this.props.todo.completed;
},
import React from 'react';
import {reactiveComponent} from 'mobservable';
// React component that responds to changes in 'todos'
export var TodoList = reactiveComponent(React.createClass({
displayName: 'TodoList',
render: function() {
var store = this.props.store;
return (<div>
<ul>
{ store.todos.map((todo, idx) =>
()
) }
{ store.pending ? (<li>Loading more items...</li>) : null }
</ul>
<hr>
Completed { store.completedCount } of { store.todos.length } items.<br>
<button>New Todo</button>
<button>Load more...</button>
</div>);todos[0].completed = true;
// Prints: 'Completed 1 of 2 todo items'
export function addTodo(title) {
todos.push(mobservable.fromJson({
title: title,
completed: false
}));
}
export function removeTodo(todo) {
todos.splice(todos.indexOf(todo), 1);
}
/** How to do something async: */
mobservable.props(todos, { isLoading: 0 });
export function loadTodosAsync() {
todos.isLoading++;
// mimic something asynchronous
setTimeout(function() {
addTodo("Asynchronously created todo");
addTodo("Another asynchronously created todo");
todos.isLoading--;
}, 2000);
}mobservable
Observable data. Reactive functions. Simple code.
