Welcome, guest ( Login )

WikiHome » DojoDataUseCases » Binding Widget Values to Widget Values

Binding Widget Values to Widget Values

Version 15, changed by chrism 02/20/2007.   Show version history


Summary:  

A data value in one widget can be bound to a data value in another widget.   Values are propogated between from the source widget to the target widget upon some trigger event.

Scenario:

Mirrors the contents of two input fields (text1 and text2) when the user tabs out of the first text field.

Programmatic:

// Assume text 1 and text2 are references to simple HTML input text fields dom nodes. 
...
dojox.data.bind(
    {scope: text1, event:"onblur"},      // triggering event
    {object: text1, property:"value"},     // source data
    {object: text2, property:"value"});   // target data
...

Declarative:

<!-- Assume Text 1 and Text2 are simple HTML input text fields . 
<!-- View -->
<input type="text" id="Text1" />
<input type="text" id="Text2" />
...
<div dojoType="dojox.data:Binding" widgetId="Binding1"
    trigger="Text1"
    triggerEvent="onblur"
    source="Text1.value"
    target="Text2.value">
</div>
...


Test Cases:

Demonstrates how two simple 'widgets' can have data binding between them that occurs on an event.

<html>
<head>
<title>Test Binding</title>
<script>
//var djConfig = {isDebug: true};
</script>
<script src="../../../../dojo/dojo.js"></script>
<script>
dojo.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.widget.Binding");
</script>
</head>
<body>
<!-- View -->
<input type="text" id="Text1" />
<input type="text" id="Text2" />

<!-- Controller -->
<div dojoType="dojox.data:Binding" widgetId="Binding1"
    trigger="Text1"
    triggerEvent="onblur"
    source="Text1.value"
    target="Text2.value"></div>
</body>
</html>

Discussion:







Attachment (1)

  File By Size Attached Ver.
widget-to-widget.jpg jaredj 13K 02/19/2007 2 Delete attachment