SemanticScuttle/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html

79 lines
2.6 KiB
HTML
Raw Normal View History

<!--
This file demonstrates how the dojox.wire code can be used to do declarative
wiring of properties/attributes of some object to the properties/attributes of
another object. It specifically uses the Child (Composite) wire type to perform
the mapping.
Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
in order for it to execute.
-->
<html>
<head>
<title>Sample Composite (Child) Wire usage.</title>
<style type="text/css">
@import "../../../../dijit/themes/tundra/tundra.css";
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.wire.ml.Invocation");
dojo.require("dojox.wire.ml.DataStore");
dojo.require("dojox.wire.ml.Transfer");
dojo.require("dojox.wire");
dojo.require("dojox.wire.demos.WidgetRepeater");
dataHolder = {
request: {onItem: function(item){}},
result: null
};
</script>
</head>
<body class="tundra">
<!--
On load of the page, invoke the fetch method of the object 'DataStore1',
get its parameters from the JS object 'sample.request
-->
<div dojoType="dojox.wire.ml.Invocation"
triggerEvent="onLoad"
object="DataStore1" method="fetch" parameters="dataHolder.request">
</div>
<!--
The store that is queried in this demo
-->
<div dojoType="dojo.data.ItemFileReadStore"
jsId="DataStore1"
url="countries.json">
</div>
<!--
Simple container widget for creating a 'list' of some set of widgets
As defined by the widget type it contains.
-->
<div dojoType="dojox.wire.demos.WidgetRepeater"
widget="dijit.form.Button" jsId="r1">
</div>
<!--
On the call of the onItem function of 'sample', trigger a binding/mapping of the
item's attribute 'name' to the target object property: dataHolder.result.caption
Then invoke the WidgetRepeater (r1)'s createNew method, using the parameters from
dataHolder.result.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="dataHolder.request" triggerEvent="onItem">
<div dojoType="dojox.wire.ml.Transfer"
source="arguments[0]" sourceStore="DataStore1"
target="dataHolder.result">
<div dojoType="dojox.wire.ml.ChildWire" name="label" attribute="name"></div>
</div>
<div dojoType="dojox.wire.ml.Invocation" object="r1" method="createNew" parameters='dataHolder.result'></div>
</div>
</body>
</html>