Two way binding between variables

[Bartek Szopka]

Hi,

I'm trying to use Tangle to provide 'two-way' binding between two variables (or more exactly - two controls).

Let's take the example of cookies and calories, I'd like to have both - cookies and calories as TKAdjustableNumber that interact with each other: changing cookies update calories, but also changing calories update cookies accordingly.

Is there any easy way to do it with Tangle?

The only solution I found was to introduce special 'formatter' for calories display, so callories control operates on cookies variable and formatter takes care of computing calories real value (see example below), but I find this solution a little bit 'hacky'. Is there any more straightforward way to do it? Maybe some special class needs to be created to allow such two-way binding?

<script type="text/javascript">

Tangle.formats.calories = function (value) { return ""+ (value * 50); }

function setUpTangle () {

var element = document.getElementById("example");

var tangle = new Tangle(element, {

initialize: function () {

this.cookies = 4;

},

update: function () {

this.cookies = this.cookies;

}

});

}

</script>

<p id="example">

When you eat <span data-var="cookies" class="TKAdjustableNumber" data-min="2" data-max="100"> cookies</span>, you

will consume <span data-var="cookies" class="TKAdjustableNumber" data-min="2" data-max="100" data-format="calories"> calories</span>.

</p>

Cheers,

Bartek