Two way binding between variables

Skip to first unread message

Bartek Szopka

Jul 19, 2013, 6:27:58 AM7/19/13

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;

<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>.

Reply all
Reply to author
0 new messages