Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Support for new attribute for data binding.

  • Loading branch information...
commit 3014e5d5dddd0ca4d280d98aa572b328ec0bce71 1 parent c022e39
Akira Sudoh authored
51 ParserExtension.js
@@ -6,9 +6,10 @@ define([
6 6 "dojo/has",
7 7 "dojo/has!dojo-mobile-parser?:dojo/parser",
8 8 "dojo/has!dojo-parser?:dojox/mobile/parser",
  9 + "dojox/mvc/_atBindingMixin",
9 10 "dojox/mvc/Element",
10 11 "dojox/mvc/FormElement"
11   -], function(require, kernel, lang, win, has, parser, mobileParser){
  12 +], function(require, kernel, lang, win, has, parser, mobileParser, _atBindingMixin){
12 13
13 14 // module:
14 15 // dojox/mvc/ParserExtension
@@ -19,34 +20,8 @@ define([
19 20 try{ has.add("dojo-parser", !!require("dojo/parser")); }catch(e){}
20 21 try{ has.add("dojo-mobile-parser", !!require("dojox/mobile/parser")); }catch(e){}
21 22
22   - function _eval(/*String*/ s){
23   - return eval("(" + s + ")");
24   - }
25   -
26 23 if(has("dojo-parser")){
27   - var oldConstruct = parser.construct, oldScan = parser.scan;
28   -
29   - parser.construct = /*====== dojo.parser.construct = ======*/ function(/*Function*/ ctor, /*DOMNode*/ node, /*Object?*/ mixin, /*Object?*/ options, /*DOMNode[]?*/ scripts, /*Object?*/ inherited){
30   - // summary:
31   - // TODOC
32   -
33   - var attrData = "data-" + (options.scope || kernel._scopeName) + "-", // typically "data-dojo-"
34   - dataDojoBind = attrData + "bind", // typically "data-dojo-bind"
35   - bind = node.getAttribute(dataDojoBind),
36   - props = lang.mixin({}, mixin);
37   -
38   - // Mix things found in data-dojo-props into the params, overriding any direct settings
39   - if(bind){
40   - try{
41   - props.refs = _eval.call(options.propsThis, "{" + bind + "}");
42   - }catch(e){
43   - // give the user a pointer to their invalid parameters. FIXME: can we kill this in production?
44   - throw new Error(e.toString() + " in data-dojo-bind='" + bind + "'");
45   - }
46   - }
47   -
48   - return oldConstruct.call(this, ctor, node, props, options, scripts, inherited);
49   - };
  24 + var oldScan = parser.scan;
50 25
51 26 parser.scan = /*====== dojo.parser.scan = ======*/ function(/*DOMNode?*/ root, /*Object*/ options){
52 27 // summary:
@@ -55,12 +30,11 @@ define([
55 30 var list = oldScan.apply(this, lang._toArray(arguments)),
56 31 dojoType = (options.scope || kernel._scopeName) + "Type", // typically "dojoType"
57 32 attrData = "data-" + (options.scope || kernel._scopeName) + "-", // typically "data-dojo-"
58   - dataDojoType = attrData + "type", // typically "data-dojo-type"
59   - dataDojoBind = attrData + "bind"; // typically "data-dojo-bind"
  33 + dataDojoType = attrData + "type"; // typically "data-dojo-type"
60 34
61   - for(var nodes = has("dom-qsa") ? root.querySelectorAll("[" + dataDojoBind + "]") : root.getElementsByTagName("*"), i = 0, l = nodes.length; i < l; i++){
  35 + for(var nodes = has("dom-qsa") ? root.querySelectorAll("[" + _atBindingMixin.prototype.dataBindAttr + "]") : root.getElementsByTagName("*"), i = 0, l = nodes.length; i < l; i++){
62 36 var node = nodes[i], foundBindingInAttribs = false;
63   - if(!node.getAttribute(dataDojoType) && !node.getAttribute(dojoType) && node.getAttribute(dataDojoBind)){
  37 + if(!node.getAttribute(dataDojoType) && !node.getAttribute(dojoType) && node.getAttribute(_atBindingMixin.prototype.dataBindAttr)){
64 38 list.push({
65 39 "type": /^select|input|textarea$/i.test(node.tagName) ? "dojox/mvc/FormElement" : "dojox/mvc/Element",
66 40 node: node
@@ -81,21 +55,14 @@ define([
81 55
82 56 var dojoType = ((options || {}).scope || kernel._scopeName) + "Type", // typically "dojoType"
83 57 attrData = "data-" + ((options || {}).scope || kernel._scopeName) + "-", // typically "data-dojo-"
84   - dataDojoType = attrData + "type", // typically "data-dojo-type"
85   - dataDojoBind = attrData + "bind", // typically "data-dojo-bind"
86   - dataDojoProps = attrData + "props", // typically "data-dojo-props"
87   - nodes = has("dom-qsa") ? (root || win.body()).querySelectorAll("[" + dataDojoBind + "]") : (root || win.body()).getElementsByTagName("*");
  58 + dataDojoType = attrData + "type"; // typically "data-dojo-type"
  59 + nodes = has("dom-qsa") ? (root || win.body()).querySelectorAll("[" + _atBindingMixin.prototype.dataBindAttr + "]") : (root || win.body()).getElementsByTagName("*");
88 60
89 61 for(var i = 0, l = nodes.length; i < l; i++){
90 62 var node = nodes[i], foundBindingInAttribs = false, bindingsInAttribs = [];
91   - if(!node.getAttribute(dataDojoType) && !node.getAttribute(dojoType) && node.getAttribute(dataDojoBind)){
  63 + if(!node.getAttribute(dataDojoType) && !node.getAttribute(dojoType) && node.getAttribute(_atBindingMixin.prototype.dataBindAttr)){
92 64 node.setAttribute(dataDojoType, /^select|input|textarea$/i.test(node.tagName) ? "dojox/mvc/FormElement" : "dojox/mvc/Element");
93 65 }
94   - var bind = node.getAttribute(dataDojoBind);
95   - if(bind){
96   - var props = node.getAttribute(dataDojoProps);
97   - node.setAttribute(dataDojoProps, (props ? [props] : []).concat(bind ? [bind] : []).join(","));
98   - }
99 66 }
100 67
101 68 return oldParse.apply(this, lang._toArray(arguments));
4 _atBindingExtension.js
@@ -31,7 +31,9 @@ define([
31 31 // Monkey patch dijit._WidgetBase.set to establish data binding if a dojox.mvc.at() handle comes
32 32 var oldWidgetBaseSet = _WidgetBase.prototype.set;
33 33 _WidgetBase.prototype.set = function(/*String*/ name, /*Anything*/ value){
34   - if((value || {}).atsignature == "dojox.mvc.at"){
  34 + if(name == _atBindingMixin.prototype.dataBindAttr){
  35 + return this._setBind(value);
  36 + }else if((value || {}).atsignature == "dojox.mvc.at"){
35 37 return this._setAtWatchHandle(name, value);
36 38 }
37 39 return oldWidgetBaseSet.apply(this, lang._toArray(arguments));
29 _atBindingMixin.js
@@ -104,13 +104,20 @@ define([
104 104 };
105 105 }
106 106
107   - return declare("dojox.mvc._atBindingMixin", null, {
  107 + var _atBindingMixin = declare("dojox.mvc._atBindingMixin", null, {
  108 + // summary:
  109 + // The mixin for dijit._WidgetBase to support data binding.
  110 +
  111 + // dataBindAttr: String
  112 + // The attribute name for data binding.
  113 + dataBindAttr: "data-dojox-mvc-bind",
  114 +
108 115 _dbpostscript: function(/*Object?*/ params, /*DomNode|String*/ srcNodeRef){
109 116 // summary:
110 117 // See if any parameters for this widget are dojox.mvc.at handles.
111 118 // If so, move them under this._refs to prevent widget implementations from referring them.
112 119
113   - var refs = this._refs = params.refs || {};
  120 + var refs = this._refs = (params || {}).refs || {};
114 121 for(var prop in params){
115 122 if((params[prop] || {}).atsignature == "dojox.mvc.at"){
116 123 var h = params[prop];
@@ -186,6 +193,21 @@ define([
186 193 }
187 194 },
188 195
  196 + _setBind: function(/*Object*/ value){
  197 + // summary:
  198 + // Sets data binding described in data-dojo-bind.
  199 +
  200 + var list = eval("({" + value + "})");
  201 + for(var prop in list){
  202 + var h = list[prop];
  203 + if((h || {}).atsignature != "dojox.mvc.at"){
  204 + console.warn(prop + " in " + dataBindAttr + " is not a data binding handle.");
  205 + }else{
  206 + this._setAtWatchHandle(prop, h);
  207 + }
  208 + }
  209 + },
  210 +
189 211 _getExcludesAttr: function(){
190 212 // summary:
191 213 // Returns list of all properties that data binding is established with.
@@ -213,4 +235,7 @@ define([
213 235 return this.constructor._attribs = list; // String[]
214 236 }
215 237 });
  238 +
  239 + _atBindingMixin.prototype[_atBindingMixin.prototype.dataBindAttr] = ""; // Let parser treat the attribute as string
  240 + return _atBindingMixin;
216 241 });
5 at.js
@@ -89,5 +89,10 @@ define([
89 89 }; // dojox.mvc.at.handle
90 90 };
91 91
  92 + // Data binding directions
  93 + at.from = sync.from;
  94 + at.to = sync.to;
  95 + at.both = sync.both;
  96 +
92 97 return lang.setObject("dojox.mvc.at", at);
93 98 });
18 tests/test_mvc_Element.html
@@ -48,11 +48,13 @@
48 48 "dojo/parser",
49 49 "dojox/mvc/at",
50 50 "dojox/mvc/ParserExtension"
51   - ], function(dojox, Stateful, parser){
  51 + ], function(dojox, Stateful, parser, at){
  52 + window.at = at;
  53 + dojox.debugDataBinding = true;
  54 +
52 55 titleModel = new Stateful({value: "Foo"});
53 56 colorModel = new Stateful({value: "bgRed"});
54 57 boldTextModel = new Stateful({checked: false});
55   - dojox.debugDataBinding = true;
56 58 parser.parse();
57 59 });
58 60 </script>
@@ -61,12 +63,12 @@
61 63 <div>
62 64 <div>
63 65 Text:
64   - <span data-dojo-bind="class: dojox.mvc.at(boldTextModel, 'checked').direct(dojox.mvc.from).attach({format: function(value){ return value ? 'boldText' : ''; }}),
65   - value: dojox.mvc.at(titleModel, 'value')"></span>
  66 + <span data-dojox-mvc-bind="class: at(boldTextModel, 'checked').direct(at.from).attach({format: function(value){ return value ? 'boldText' : ''; }}),
  67 + value: at(titleModel, 'value')"></span>
66 68 </div>
67 69 <div>
68 70 Choose text from:
69   - <select type="combo" data-dojo-bind="value: dojox.mvc.at(titleModel, 'value')">
  71 + <select type="combo" data-dojox-mvc-bind="value: at(titleModel, 'value')">
70 72 <option value="Foo">Foo</option>
71 73 <option value="Bar">Bar</option>
72 74 </select>
@@ -74,10 +76,10 @@
74 76 </div>
75 77
76 78 <div style="margin-top:8px;">
77   - <div style="width:200px;height:200px;" data-dojo-bind="class: dojox.mvc.at(colorModel, 'value')"></div>
  79 + <div style="width:200px;height:200px;" data-dojox-mvc-bind="class: at(colorModel, 'value')"></div>
78 80 <div>
79 81 Choose color from:
80   - <select type="combo" data-dojo-bind="value: dojox.mvc.at(colorModel, 'value')">
  82 + <select type="combo" data-dojox-mvc-bind="value: at(colorModel, 'value')">
81 83 <option value="bgRed">Red</option>
82 84 <option value="bgGreen">Green</option>
83 85 <option value="bgBlue">Blue</option>
@@ -87,7 +89,7 @@
87 89
88 90 <div style="margin-top:8px;">
89 91 The text should be bold:
90   - <input type="checkbox" data-dojo-bind="checked: dojox.mvc.at(boldTextModel, 'checked')">
  92 + <input type="checkbox" data-dojox-mvc-bind="checked: at(boldTextModel, 'checked')">
91 93 </div>
92 94 </body>
93 95 </html>

0 comments on commit 3014e5d

Please sign in to comment.
Something went wrong with that request. Please try again.