| 1 | define([ |
|---|
| 2 | "dojo/_base/kernel", |
|---|
| 3 | "dojo/_base/lang", |
|---|
| 4 | "./sync", |
|---|
| 5 | "./_atBindingExtension" |
|---|
| 6 | ], function(kernel, lang, sync){ |
|---|
| 7 | |
|---|
| 8 | kernel.experimental("dojox.mvc"); |
|---|
| 9 | |
|---|
| 10 | var at = function(/*dojo/Stateful|String*/ target, /*String*/ targetProp){ |
|---|
| 11 | // summary: |
|---|
| 12 | // Returns a pointer to data binding target (a dojo/Stateful property), called at handle, which is used for start synchronization with data binding source (another dojo/Stateful property). |
|---|
| 13 | // description: |
|---|
| 14 | // Typically used in data-dojo-props so that a widget can synchronize its attribute with another dojo/Stateful, like shown in the example. |
|---|
| 15 | // target: dojo/Stateful|String |
|---|
| 16 | // dojo/Stateful to be synchronized. |
|---|
| 17 | // targetProp: String |
|---|
| 18 | // The property name in target to be synchronized. |
|---|
| 19 | // returns: |
|---|
| 20 | // A pointer to data binding target (a dojo/Stateful property), called at handle, which is used for start synchronization with data binding source (another dojo/Stateful property). |
|---|
| 21 | // example: |
|---|
| 22 | // Two seconds later, the text box changes from "Foo" to "Bar" as the "value" property in model changes. |
|---|
| 23 | // | <html> |
|---|
| 24 | // | <head> |
|---|
| 25 | // | <script src="/path/to/dojo-toolkit/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: 0"></script> |
|---|
| 26 | // | <script type="text/javascript"> |
|---|
| 27 | // | require([ |
|---|
| 28 | // | "dojo/parser", "dojo/Stateful", "dijit/form/TextBox", "dojo/domReady!" |
|---|
| 29 | // | ], function(parser, Stateful){ |
|---|
| 30 | // | model = new Stateful({value: "Foo"}); |
|---|
| 31 | // | setTimeout(function(){ model.set("value", "Bar"); }, 2000); |
|---|
| 32 | // | parser.parse(); |
|---|
| 33 | // | }); |
|---|
| 34 | // | </script> |
|---|
| 35 | // | </head> |
|---|
| 36 | // | <body> |
|---|
| 37 | // | <script type="dojo/require">at: "dojox/mvc/at"</script> |
|---|
| 38 | // | <input type="text" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, 'value')"> |
|---|
| 39 | // | </body> |
|---|
| 40 | // | </html> |
|---|
| 41 | // example: |
|---|
| 42 | // Edit in text box is reflected to the text next to it. |
|---|
| 43 | // | <html> |
|---|
| 44 | // | <head> |
|---|
| 45 | // | <script src="/path/to/dojo-toolkit/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: 0"></script> |
|---|
| 46 | // | <script type="text/javascript"> |
|---|
| 47 | // | require([ |
|---|
| 48 | // | "dojo/parser", "dojo/Stateful", "dojo/domReady!" |
|---|
| 49 | // | ], function(parser, Stateful){ |
|---|
| 50 | // | model = new Stateful({value: "Foo"}); |
|---|
| 51 | // | parser.parse(); |
|---|
| 52 | // | }); |
|---|
| 53 | // | </script> |
|---|
| 54 | // | </head> |
|---|
| 55 | // | <body> |
|---|
| 56 | // | <script type="dojo/require">at: "dojox/mvc/at"</script> |
|---|
| 57 | // | <input type="text" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, 'value')"> |
|---|
| 58 | // | <span data-dojo-type="dijit/_WidgetBase" data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(model, 'value')"></span> |
|---|
| 59 | // | </body> |
|---|
| 60 | // | </html> |
|---|
| 61 | |
|---|
| 62 | return { // dojox/mvc/at.handle |
|---|
| 63 | atsignature: "dojox.mvc.at", |
|---|
| 64 | target: target, |
|---|
| 65 | targetProp: targetProp, |
|---|
| 66 | bindDirection: sync.both, |
|---|
| 67 | direction: function(/*Number*/ bindDirection){ |
|---|
| 68 | this.bindDirection = bindDirection; |
|---|
| 69 | return this; |
|---|
| 70 | }, |
|---|
| 71 | transform: function(/*dojox/mvc/sync.converter*/ converter){ |
|---|
| 72 | this.converter = converter; |
|---|
| 73 | return this; |
|---|
| 74 | }, |
|---|
| 75 | equals: function(/*Function*/ equals){ |
|---|
| 76 | this.equalsCallback = equals; |
|---|
| 77 | return this; |
|---|
| 78 | } |
|---|
| 79 | }; |
|---|
| 80 | }; |
|---|
| 81 | |
|---|
| 82 | /*===== |
|---|
| 83 | at.handle = { |
|---|
| 84 | // summary: |
|---|
| 85 | // A handle of data binding target (a dojo/Stateful property), which is used for start synchronization with data binding source (another dojo/Stateful property). |
|---|
| 86 | |
|---|
| 87 | // target: dojo/Stateful|String |
|---|
| 88 | // The data binding literal or dojo/Stateful to be synchronized. |
|---|
| 89 | target: new dojo/Stateful(), |
|---|
| 90 | |
|---|
| 91 | // targetProp: String |
|---|
| 92 | // The property name in target to be synchronized. |
|---|
| 93 | targetProp: "", |
|---|
| 94 | |
|---|
| 95 | // bindDirection: Number |
|---|
| 96 | // The data binding bindDirection, choose from: dojox/mvc/sync.from, dojox/mvc/sync.to or dojox/mvc/sync.both. |
|---|
| 97 | bindDirection: dojox/mvc/sync.both, |
|---|
| 98 | |
|---|
| 99 | // converter: dojox/mvc/sync.converter |
|---|
| 100 | // Class/object containing the converter functions used when the data goes between data binding target (e.g. data model or controller) to data binding origin (e.g. widget). |
|---|
| 101 | converter: null, |
|---|
| 102 | |
|---|
| 103 | direction: function(bindDirection){ |
|---|
| 104 | // summary: |
|---|
| 105 | // Sets data binding bindDirection. |
|---|
| 106 | // bindDirection: Number |
|---|
| 107 | // The data binding bindDirection, choose from: dojox/mvc/sync.from, dojox/mvc/sync.to or dojox/mvc/sync.both. |
|---|
| 108 | }, |
|---|
| 109 | |
|---|
| 110 | transform: function(converter){ |
|---|
| 111 | // summary: |
|---|
| 112 | // Attach a data converter. |
|---|
| 113 | // converter: dojox/mvc/sync.converter |
|---|
| 114 | // Class/object containing the converter functions used when the data goes between data binding target (e.g. data model or controller) to data binding origin (e.g. widget). |
|---|
| 115 | }, |
|---|
| 116 | |
|---|
| 117 | equals: function(equals){ |
|---|
| 118 | // summary: |
|---|
| 119 | // Sets a function to check if a value has really been changed when source/target dojo/Stateful changes. |
|---|
| 120 | // equals: Function |
|---|
| 121 | // The function to check for the change. |
|---|
| 122 | // Should take two arguments, and should return true when those two are considered equal. |
|---|
| 123 | } |
|---|
| 124 | }; |
|---|
| 125 | =====*/ |
|---|
| 126 | |
|---|
| 127 | // Data binding bindDirections |
|---|
| 128 | at.from = sync.from; |
|---|
| 129 | at.to = sync.to; |
|---|
| 130 | at.both = sync.both; |
|---|
| 131 | |
|---|
| 132 | // lang.setObject() thing is for back-compat, remove it in 2.0 |
|---|
| 133 | return lang.setObject("dojox.mvc.at", at); |
|---|
| 134 | }); |
|---|
