[atlas] inout (two way) bindings
binding is bind property of a component to a control on a page or another component, you can specify transform during binding or even use your own custom transformation.
this is an example of two way binding:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page>
</script>
<input type="text" id="textBoxInput1" />
<input type="text" id="textBoxInput2" />
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<textBox id="textBoxInput1"/>
<textBox id="textBoxInput2">
<bindings>
<binding dataContext="textBoxInput1" dataPath="text" property="text" direction="InOut" />
</bindings>
</textBox>
</components>
</page>
</script>
</body>
</html>
------
apply transform during binding:
<textBox id="textBoxNumber" />
<label id="label">
<bindings>
<binding dataContext="textBoxNumber" dataPath="text" property="text" transform="Add" transformerArgument="5" />
</bindings>
</label>
custom transform during binding:
<label id="labelText">
<bindings>
<binding dataContext="textBoxText" dataPath="text" property="text" />
<binding id="setCss" dataContext="selectStyle" dataPath="selectedValue" property="cssClass" transform="DoAdditionalHandling" />
</bindings>
</label>
this accompanied custom transform, notice the parameter: (defined by atlas framework)
<script type="text/javascript">
function DoAdditionalHandling(sender, eventArgs)
{
var tbxElem = $('textBoxText').control;
if (tbxElem.get_text().length > 0)
{
// The value is that from the select, so let's ensure it's set
// The property here is the cssClass
eventArgs.set_value(eventArgs.get_value());
// Add additional text to the output:
var textElem = $('labelText').control;
textElem.set_text(tbxElem.get_text() + " (You used the style selector)");
}
}
</script>
