XAJA provides advanced support of data binding. Connections between visual and logical elements are imperative, without necessity to handling objects lifecycle and addressing elements directly from the script. Binding expressions uses it's own language, which is almost same as JavaScript, but surprisingly it is parsed and interpreted by XAJA engine. The reason is simple - binding must react to all changes of source values, regardless of how deep in expression tree is change signalized.
You don't have to setup anything else than refer to XAJA framework, understand few simple notation rules and fill XJ-BINDING attribute by some binding expression:
Each binding expression has:
- Owner - it is the visual element on which is binding defined. When the element is removed from DOM, also binding is destoryed.
- Direction modifier - binding could transfer values from right side to left side (:=), from left to right (=:) or be two-way (:=:)
- Relative source - it is special symbol, which determines in what context is the expresion evaluated. For example symbol '#' specifies that expression will be evaulated against document.window. So right part of expression from example would be rewritten as "document.window.clickCount". There are defined three relative source symbols:
- # - window
- @ - owner
- % - DataContext of owner ((link to anchor))
If relative source is omitted, left part of expression uses "@" and right part uses "%".
Binding expression on both sides could be complex. You can call methods and also dive deep in expression tree:
We already mentioned DataContext. It is special mechanism for simplification of data binding. Each element virtually inherits DataContext from its parent until DataContext of some child element is explicitly set. As you noticed above, if Relative Source symbol is omitted in right side expression, it is by default evaluated against owners DataContext.
Keep in your mind that DataContext should not be ever set directly, but using binding or, when it is necessary, using DataContextManager:
var div = document.getElementById("div1");
Xaja.get("DataContextManager").setDataContext(div, myDatacontextObject);
At the end, few words about watching techniques. Is obvious that XAJA has to somehow watch changes of binding sources. There are three mechanisms which the system tries to apply in following order:
1.) Native JS watch
2.) FieldeEncapsulation into setter
3.) Watching interval
The decision of what mechanism will be used in each particular case, depends of borwser support and also on type of source object.
