Various frameworks like Flex, Silver light, WPF etc introduced data binding mechanisms that helped us in creating templates of User Interface elements and differentiate between data and view. Declarative data binding helps in understanding relation between user interface and data (usually called as model).
However, HTML and JavaScript currently do not support any forms of data binding. But HTML does allow you to define extra attributes, and JavaScript can process them.
Atoms.js will process xml attribute values between curly braces {} and square brackets. And convert them into suitable binding expressions.
In the following sample, you can see how firstName and lastName properties of model are bound to UI element. One time and One way binding expressions can contain any form of JavaScript expression. (JavaScript expression is entire expression after equal to (=) sign in assignment statement till semi colon.)
Note: Binding will only work for these keywords. $data (data property of current control), $scope, $owner (self, since this is not accessible here), $appScope (application level scope). Any property after these keywords will be bound automatically.
Binding Expressions can only reference global javascript variables and properties of control ($owner) that holds the element. Others are just shortcuts. In short, $data is equivalent to $owner.data, $scope is equivalent to $owner.scope.
Note: Binding expression will never raise null pointer exception, as binding will not be executed if any middle property is evaluated as null. For example in expression $scope.control.selectedItem.MovieName , if control's selectedItem is null, binding will cancel further evaluation and it will not raise any exceptions. Instead, entire expression will be considered as null.