Our application does not deal with data, however here we will show how useful data binding can be even in the absence of data. Data binding can be used to simplify non data based code.

Modify Index.iwml:

ACORN 1.0 IWML 1.0
Guess.Index[]
  SimpleStack[]
    JQUI.AccordionGroup[]
      JQUI.Accordion[] Play
        SimpleStack[]
          Edit =this.Guess
          Text Guess #[=this.Count]
          Gap;
          BS.Button:GuessButton
            Text: Guess
            Face: Info
            ButtonSize: Large
          ]
        ]
      ]
      JQUI.Accordion[] Instructions
        Text Enter a number and click Guess.
      ]
      JQUI.Accordion[] About
        Text Where would we be without the Guess demo?
      ]
    ]
    Alert.Notification:MsgBox
      Title: Guess Demo
      AlertType: success
    ]
  ]
]

Modify Index.js:

var Guess;
(function (Guess) {
    class Index extends IntraWeb.Code {

        constructor() {
            super(...arguments);
            // Remove these two lines:
            this.Guess = null;
            this.TryCount = null;
            this.GuessButton = null;
            this.MsgBox = null;

            this.Count = 0;
            this.MagicNo = Math.floor((Math.random() * 100) + 1);
            this.Guess = NaN;
            this.Msg = '';
        }

        Event_GuessButton_Click(aSender, e) {
            // Remove this line:
            let xGuess = Number(this.Guess.Text.Value);
            if (isNaN(this.Guess)) {
                this.MsgBox.Show('Not a valid number.');
            } else if (this.Guess < 1 || this.Guess > 100) {
                this.MsgBox.Show('Not in the range of 1 to 100.');
            } else {
                this.Count++;
                // Remove this line:
                this.TryCount.Text.Value = 'Guess #' + this.Count;

                if (this.Guess < this.MagicNo) {
                    this.MsgBox.Show('Too low.');
                } else if (this.Guess > this.MagicNo) {
                    this.MsgBox.Show('Too high.');
                } else if (this.Guess === this.MagicNo) {
                    this.MsgBox.Show('Congratulations! You guessed the magic number.');
                    this.GuessButton.Enabled.Value = false;
                }
            }
 
            this.Guess = NaN;
        }
    }
    Guess.Index = Index;
})(Guess || (Guess = {}));

Notice that we do not have to update TryCount or read or write to the Edit. Instead it is now handled by data binding against properties of our class.

The run time result is the same as before, we only changed how we do it.

Two Way Data Binding

Edit =this.Guess

The = prefix in a property value signifies a two way data bind to the property value. This binds the text property of the edit (via parameter syntax) to the .Guess property of our class. Since it is a two way binding, it synchronizes the value both way. Any property in IWML can be data bound.

One Way Data Binding

Text Guess #[=this.Count]

This creates a one way data binding because it does not bind the whole .Text property of the Text control. Instead it creates an inline binding inside the text value using markdown. Any time this.Count is changed, the text for this Text control will be updated.

Conclusion

What we demonstrated here is very simple data binding. However data binding has full support for cursors, REST, JSON data and more.

Next: More Code