Welcome, guest ( Login )

WikiHome » DojoDataUseCases » Binding Topic Subscription to Widget

Binding Topic Subscription to Widget

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

Summary: 

Bind a topic message (a property inside the message), to a specific property on a widget.

Scenarios:

A user enters some test and clicks a button to publish the text onto a topic.   A binder is bound to that topic and takes the message provided from the topic and binds a specific property from that message to the value in another text box.

Other examples:
- Chart widget bound to dynamic data (stock quotes, performance metrics)
- Gauge widget bound to performance metrics.

Programmatic:

...
<input type="text" id="Text1" />
<input type="button" id="Button1" value="By Topic" />
<input type="text" id="Text2" />
...
    var text1 = dojo.byId("Text1");
    var text2 = dojo.byId("Text2");
    var button = dojo.byId("Button1");
   
    dojo.event.connect(button, "onclick", function() {
        dojo.event.topic.publish("copyTopic", text1);
    });
   
    dojox.data.bind( {topic: "copyTopic"}, {property: "[0].value"}, {object: text2, property: "value"} );

Declarative:

...
<input type="text" id="Text1" />
<input type="button" id="Button1" value="By Topic" />
<input type="text" id="Text2" />

<div dojoType="dojox.data:Action" widgetId="Action1"
    trigger="Button1"
    triggerEvent="onclick"
    topic="copyTopic"
    params="Text1"></div>

<div dojoType="dojox.data:Binding" widgetId="Binding2"
    triggerTopic="copyTopic"
    source="arguments[0].value"
    target="Text2.value"></div>
...


Test Cases

In this example, the 'widget' is simply a JavaScript object and HTML field, but there is no reason it could not be a dojo widget.

Programmatic:

<html>
<head>
<title>Test Binding</title>
<script>
var djConfig = {isDebug: true};
</script>
<script src="../../../../dojo/dojo.js"></script>
<script>
dojo.require("dojo.event.*");
dojo.require("dojo.event.topic");
dojo.registerModulePath("dojox.data", "../dojox/src/data");
dojo.require("dojox.data.decl.Action");
dojo.require("dojox.data.common");
dojo.require("dojox.data.Binding");
</script>
</head>
<body>
<!-- View -->
<input type="text" id="Text1" />
<input type="button" id="Button1" value="By Topic" />
<input type="text" id="Text2" />

<script>
    var text1 = dojo.byId("Text1");
    var text2 = dojo.byId("Text2");
    var button = dojo.byId("Button1");
    
    dojo.event.connect(button, "onclick", function() {
        dojo.event.topic.publish("copyTopic", text1);
    });
    
    dojox.data.bind( {topic: "copyTopic"}, {property: "[0].value"}, {object: text2, property: "value"} );


</script>
</body>
</html>

Declarative:

<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.decl.Action");
dojo.require("dojox.data.decl.Binding");
</script>
</head>
<body>
<!-- View -->
<input type="text" id="Text1" />
<input type="button" id="Button1" value="By Topic" />
<input type="text" id="Text2" />

<div dojoType="dojox.data:Action" widgetId="Action1"
    trigger="Button1"
    triggerEvent="onclick"
    topic="copyTopic"
    params="Text1"></div>

<div dojoType="dojox.data:Binding" widgetId="Binding1"
    triggerTopic="copyTopic"
    source="arguments[0].value"
    target="Text2.value"></div>
</body>
</html>

Discussion:







Attachments (0)

  File By Size Attached Ver.