smart-observe demo: react

by longhao he

HTML

<script src="https://unpkg.com/smart-observe/dist/smart-observe.min.js"></script>

Babel + JSX

/* https://github.com/cnlon/smart-observe */

const options = {
  data: {
    PI: Math.PI,
    radii: 1,
  },
  computed: {
    'area': function () {
      return this.PI * this.square(this.radii) // πr²
    },
  },
  watchers: {
    'area': function (newValue, oldValue) {
      print(`area: ${newValue}`)
    },
  },
  methods: {
    square (num) {
      return num * num
    },
  },
}
const target = observe.react(options)
target.radii = 3
// area: 28.274333882308138


function print(content) {
  content += '<br>'
  document.body.innerHTML += content
}