merge

src/core/DOM.js

@@ -43,7 +43,7 @@ NS.apply = function(a,b) {
     var used = {
         cls: true, className: true, 'class': true,
         attr: true, style: true, renderTo: true,
-        prop: true,
+        prop: true, bind: true,
         on: true
     };
     var fastDomEl = function(type, cfg) {
@@ -265,27 +265,69 @@ NS.apply = function(a,b) {
         return out;
     };
 
-    D.cls = function() {
-        var out = [], i = 0, _i = arguments.length, token, tmp, key;
+    var dpID = 1;
+    var DataPiece = function(id){this.id = id;};
+    DataPiece.prototype = {value: void 0, update: function(){}};
+    var DataPieceFactory = function(refs, fn) {
+        var id = dpID++;
+        var dp = new DataPiece(id);
+        refs.push(dp);
+        fn(function(val) {
+            dp.value = val;
+            dp.update();
+        });
+        return dp;
+    };
+    var RefHash = function(){};RefHash.prototype = {any: false};
+    D.__cls = function(args, refs) {
+        return function(update) {
+            var i, _i, lastCls,
+              constructCls = function() {
+                  var cls = D._cls(args, [], 0);
+                  if(lastCls !== cls)
+                      update(lastCls = cls);
+              };
+            for( i = 0, _i = refs.length; i < _i; i++ )
+                refs[ i ].update = constructCls;
+
+            constructCls();
+        };
+    };
+    D._cls = function(args, refs, depth) {
+        var out = [], i = 0, _i = args.length, token, tmp, key;
+
         for(;i<_i;i++){
-            token = arguments[i];
-            if(typeof token === 'string'&& token){
+            token = args[i];
+            if(typeof token === 'string' && token){
                 out.push( token );
             }else if(typeof token === 'object'){
-                if(Array.isArray(token)){
-                    tmp = D.cls.apply(null, token);
+                if(token instanceof DataPiece){
+                    token.value && out.push(token.value);
+                }else if(Array.isArray(token)){
+                    tmp = D._cls(token, refs, depth+1);
+                    // TODO check for push tmp
                     tmp && out.push( token );
                 }else{
                     for(key in token){
-                        token[key] && out.push( key );
+                        if(token[key] instanceof DataPiece){
+                            token[key].value && out.push(key);
+                        }else if(typeof token[key] === 'function'){
+                            token[ key ] = DataPieceFactory(refs, token[ key ]);
+                        }else{
+                            token[ key ] && out.push( key );
+                        }
                     }
                 }
             }else if(typeof token === 'function'){
-
+                args[i] = DataPieceFactory(refs, args[i]);
             }
         }
-        return out.join(' ');
+        return depth === 0 && refs.length ? D.__cls(args, refs): out.join(' ');
     };
+    D.cls = function() {
+        return D._cls(arguments, [], 0);
+    };
+
     D.escapeCls = function(cls) {
         return (cls+'').replace(/[^a-zA-Z0-9\-_]/g,'');
     };

src/view/cmp/field/LabeledField.jsx

 import './LabeledField.scss';
 import Input from './Input.jsx';
 
-export default D.declare('view.cmp.field.LabeledField', (cfg, children)=>
-  <div class={D.cls("labeled-field", {"labeled-field--invalid": cfg.invalid})}>
+export default D.declare('view.cmp.field.LabeledField', (cfg, children)=> {
+  console.log(cfg.invalid)
+  return <div class={D.cls( "labeled-field", cfg.cls, { "labeled-field--invalid": cfg.invalid } )}>
     <label class="labeled-field__label">
-        <span class="labeled-field__label-text">{cfg.label}</span>
-        <Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
+      <span class="labeled-field__label-text">{cfg.label}</span>
+      <Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
     </label>
     {children}
   </div>
-)
+})