+ 0 -

+ 0 -

+ 0 -

  <p data-behavior="counter">
    <button data-behavior="increment">+</button>
    <span data-behavior-target="number">0</span>
    <button data-behavior="decrement">-</button>
  </p>
  

  $.behavior( 'counter' ).ifPresent(function( root, $root ) {
    $root.on( 'updateNumber', function(_, number) {
      root.target( 'number' ).text( number );
    });

    var setState = function(value) { this.data( 'state', value ) };
    var getState = function() { return this.data( 'state' ) || 0 };

    var updateNumberWith = function(value) {
      return function() {
        var number = getState.call( $root ) + value;

        setState.call( $root, number );

        $root.trigger( 'updateNumber', number );
      };
    };

    var handleClickAndAdd = function(value) {
      return function() {
        this.on( 'click', updateNumberWith( value ) );
      }
    };

    root.child( 'increment' ).ifPresent( handleClickAndAdd( 1 ) );
    root.child( 'decrement' ).ifPresent( handleClickAndAdd( -1 ) );
  });