I'm just getting to the point in my flex application where I'm trying
to implement binding between my model and view. I've set up
bidirectional binding in the model and UI by setting a binding in
each. The model uses normal object syntax to bind to the value of a UI
element and the UI element uses E4X to bind to a node in the XML
model.
This works great when I'm using curly braces to define the bindings
directly in the MXML. I get changes in the UI to propagate instantly
to the model and changes in the model to propagate instantly to the
UI. Great, I can now both save a load my data.
The UI element looks like this:
<mx:TextInput id="firstName" required="true"
text="{model.personal_stuff.question.(@page_id ==
'personal_page_1').ApplicantFName}"/>
The problem comes when I need to define my bindings in a different
way. Currently many of my UI elements are defined in generic
components which will be used in multiple applications with different
models. I need to be able to set the bindings differently for
different uses of the component. I though, no problem, I'll use a
Binding tag.
<mx:Binding source="model.personal_stuff.question.(@page_id ==
'personal_page_1').ApplicantFName.toString()"
destination="firstName.text"/>
This works fine if it's set up in the component that holds this
element, but if I put it in an extended component, Flex fails with a
runtime error about multiple child sets. Now, I can put this binding
tag in the MXML where I'm including this component but I'd rather not
so that I can make my code more modular and maintainable.
The last option is to do this through ActionScript so I've tried to
use BindingUtil to set up the binding. The obvious methods didn't work
as E4X doesn't seem to be supported in the string syntax of the
binding chain but it does seem to be possible to use the getter
methods to get the value as well. The following will vause the correct
value to be loaded into the UI element but only initially:
public function getTT(personal_stuff : XMLList) : XML {
var node : XML = personal_stuff[0].question.(@page_id ==
'personal_page_1')[0];
return node;
}
public function getName(h : XML) : String {
var n : XML = h.ApplicantFName[0];
var s : String = n.toString();
return s;
}
BindingUtils.bindProperty(firstName, "text", model, ["personal_stuff",
{name: "question", getter: getTT}, {name: "ApplicantFName", getter:
getName}]);
However, further changes to the model's value don't cause the UI
element to be updated.
I'd love some help with this as the bindProperty's complex methods
(through the chain and with the getter functions) don't have too many
examples. For now I'm likely going to go with setting the Binding tags
in my main Application where these pages are defined but I would like
to know ow to make the AS version work as well, for future reference.
--
Justin Patrin
