Observable isn't updating

I’m trying to make a checkbox and this is what I got so far.

<Rectangle Clicked="{ChangeColor}" Name="checkbox" ux:Class="CCheckbox" Width="30" Height="30" Color="{color}">
<JavaScript>
  var Observable = require('FuseJS/Observable');
  var color = Observable(0);
  color.value = "#7bf05d";
  function ChangeColor()
  {
    color.value = "#bfdff6";
  }

  module.exports = { color:color };
</JavaScript>
</Rectangle>

This code is supposed to make a rectangle that changes color when clicked, however when the CCheckbox is clicked it does not change. Note: I added the lines because the forum seems to compile them as HTML

You forgot to export the ChangeColor event. This should work:

<App>
    <Rectangle Clicked="{ChangeColor}" Name="checkbox" ux:Class="CCheckbox" Width="30" Height="30" Color="{color}">
        <JavaScript>
            var Observable = require('FuseJS/Observable');
            var color = Observable(0);
            color.value = "#7bf05d";
            function ChangeColor()
            {
            color.value = "#bfdff6";
            }

            module.exports =
            {
                ChangeColor:ChangeColor,
                color:color
            };
        </JavaScript>
    </Rectangle>
    <CCheckbox />
</App>

Thanks !