Mobx map example

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

HTML

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

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

<script src="https://cdn.jsdelivr.net/g/[email protected](react.min.js+react-dom.min.js+react-dom-server.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 control = mobx.observable({
  htmlAttributeMap: mobx.observable.map({
    className: 'form-control',
    name: 'email',
    id: 'emailControl'
  }),
  htmlAttributes: mobx.computed(function() {
    return control.htmlAttributeMap.toJS();
  })
});

mobx.autorun(function auto_statsToJS() {
  ReactDOM.render(React.DOM.input(control.htmlAttributes), document.getElementById('react-mount'));
});

mobx.autorun(function auto_statsToJS() {
  console.log(ReactDOMServer.renderToStaticMarkup(React.DOM.input(control.htmlAttributes)));
});

control.htmlAttributeMap.set('disabled', true);
control.htmlAttributeMap.delete('disabled');