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.