wtnabe/jquery-and-mobx-counter.html

## jquery-and-mobx-counter.html
<html>
  <head>
    <script crossorigin type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mobx/4.15.0/mobx.umd.min.js"></script>
    <script crossorigin type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
      controller = {
        $el: undefined,
        init: function ($el) {
          this.$el = $el
          this.render()
          var self = this
          this.$el.on('up', function () {
            self.state.upCount()
          })
          mobx.autorun(function () { self.render() })
        },
        state: mobx.observable(
        {
          name: 'counter',
          count: 0,
          upCount: function () {
            this.count++
          }
        },
        {
          upCount: mobx.action
        }),
        render: function () {
          this.$el.find('#value').text(this.state.count)
        }
      }
      $(function() {
        controller.init($('#counter'))
      })
    </script>
    <title>jQuery + MobX counter</title>
  </head>
  <body>
    <h1>jQuery + MobX counter</h1>
    <div id="counter"><!-- container -->
      <p id="value"></p>
      <button onclick="$(this).trigger('up')">up</button>
    </div><!-- end of container -->
  </body>
</html>
	<html>
	<head>
	<script crossorigin type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mobx/4.15.0/mobx.umd.min.js"></script>
	<script crossorigin type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<script type="text/javascript">
	controller = {
	$el: undefined,
	init: function ($el) {
	this.$el = $el
	this.render()
	var self = this
	this.$el.on('up', function () {
	self.state.upCount()
	})
	mobx.autorun(function () { self.render() })
	},
	state: mobx.observable(
	{
	name: 'counter',
	count: 0,
	upCount: function () {
	this.count++
	}
	},
	{
	upCount: mobx.action
	}),
	render: function () {
	this.$el.find('#value').text(this.state.count)
	}
	}
	$(function() {
	controller.init($('#counter'))
	})
	</script>
	<title>jQuery + MobX counter</title>
	</head>
	<body>
	<h1>jQuery + MobX counter</h1>
	<div id="counter"><!-- container -->
	<p id="value"></p>
	<button onclick="$(this).trigger('up')">up</button>
	</div><!-- end of container -->
	</body>
	</html>