React + Mobservable

by ramnathv

HTML

<script src="//cdn.rawgit.com/mweststrate/mobservable/master/dist/mobservable.js"></script>
<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<script src="//cdn.rawgit.com/mweststrate/mobservable-react/master/index.js"></script>
<div id="app"></div>

Babel + JSX

/*
var person = mobservable.observable({
	firstName: "Michel",
	lastName: "Westrate",
	nickName: "",
	fullName: function(){
	  return this.firstName + " " + this.lastName
	}
})

const ProfileView = mobservableReact.observer((props) => {
	return (
		props.person.nickName === ""
		  ? <div>{props.person.fullName}</div>
		  : <div>{props.person.nickName}</div>
	)
})

setTimeout(() => person.nickName = "mweststrate", 5000)

ReactDOM.render(
	<ProfileView person={person} />,
	document.getElementById("app")
)
*/

let Model = mobservable.observable(5)

const View = mobservableReact.observer((props) => {
  console.log('rendering...')
  let params =  {
    min: 0,
    max: 10,
    defaultValue: props.value(),
    onChange: (e) => {props.value(e.target.value)},
    value: props.value()
  }
  console.log(params)
  return(
    <div>
      <input type="range" {...params} />
      <input type="number" {...params}/>
    </div>
  )
})

ReactDOM.render(
	<View value={Model} />,
	document.getElementById("app")
)