支持自动watch

changelog.md

@@ -1,5 +1,6 @@
 # 更新日志
 2.0(2021-09)
+- 支持自动watch
 - 支持h函数传递left、right，优化left_right_vertical_adapt布局的jsx写法
 - 新增bi.virtual_group_list组件
 

examples/dev.html

@@ -12,187 +12,31 @@
     var Model = BI.inherit(Fix.Model, {
         state: function () {
             return {
-                expand: false,
+                count: 0
-                showClearAll: false,
-                hasUndo: false,
-                hasRedo: false
             };
-        },
-
-        computed: {
-            expandText: function () {
-                return this.model.expand ? "expand" : "not-expand";
-            },
-            clearAllText: function () {
-                return this.model.showClearAll ? "showClearAll" : "not-showClearAll";
-            },
-            undoText: function () {
-                return this.model.hasUndo ? "hasUndo" : "not-hasUndo";
-            },
-            redoText: function () {
-                return this.model.hasRedo ? "hasRedo" : "not-hasRedo";
-            }
-        },
-
-        actions: {
-            setExpand: function () {
-                this.model.expand = !this.model.expand;
-            },
-            setClearAll: function () {
-                this.model.showClearAll = !this.model.showClearAll;
-            },
-            setUndo: function () {
-                this.model.hasUndo = !this.model.hasUndo;
-            },
-            setRedo: function () {
-                this.model.hasRedo = !this.model.hasRedo;
-            }
         }
     });
 
     BI.model("demo.model", Model);
 
-    function useExpand () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("expandText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.expandText,
-                handler: function () {
-                    store.setExpand();
-                }
-            };
-        };
-    }
-
-    function useClearAll () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("clearAllText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.clearAllText,
-                handler: function () {
-                    store.setClearAll();
-                }
-            };
-        };
-    }
-
-    function useUndo () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("undoText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.undoText,
-                handler: function () {
-                    store.setUndo();
-                }
-            };
-        };
-    }
-
-    function useRedo () {
-        var button;
-        var store = BI.useStore();
-        BI.onBeforeMount(function () {
-
-        });
-        BI.onMounted(function () {
-
-        });
-        BI.onBeforeUnmount(function () {
-
-        });
-        BI.onUnmounted(function () {
-
-        });
-        BI.watch("redoText", function (val) {
-            button.setText(val);
-        });
-        return function () {
-            return {
-                type: "bi.button",
-                ref: function (_ref) {
-                    button = _ref;
-                },
-                text: store.model.redoText,
-                handler: function () {
-                    store.setRedo();
-                }
-            };
-        };
-    }
-
     var Widget = BI.inherit(BI.Widget, {
         _store: function () {
             return BI.Models.getModel("demo.model");
         },
         setup: function () {
-            var expandComponent = useExpand();
+            var store = BI.useStore();
-            var clearAllComponent = useClearAll();
-            var undoComponent = useUndo();
-            var redoComponent = useRedo();
             return function () {
                 return {
                     type: "bi.vertical",
-                    items: [expandComponent(), clearAllComponent(), undoComponent(), redoComponent()]
+                    items: [{
+                        type: "bi.button",
+                        effect: function () {
+                            this.setText(store.model.count)
+                        },
+                        handler: function () {
+                            store.model.count++;
+                        }
+                    }]
                 };
             };
         }

examples/effect.html

@@ -0,0 +1,57 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
+    <script src="../dist/2.0/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var Model = BI.inherit(Fix.Model, {
+        state: function () {
+            return {
+                count: 0
+            };
+        }
+    });
+
+    BI.model("demo.model", Model);
+
+    var Widget = BI.inherit(BI.Widget, {
+        _store: function () {
+            return BI.Models.getModel("demo.model");
+        },
+        setup: function () {
+            var store = BI.useStore();
+            return function () {
+                return {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.button",
+                        effect: function () {
+                            this.setText(store.model.count)
+                        },
+                        handler: function () {
+                            store.model.count++;
+                        }
+                    }]
+                };
+            };
+        }
+    });
+    BI.shortcut("demo.hooks", Widget);
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.hooks"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>

examples/style.html

@@ -0,0 +1,66 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
+    <script src="../dist/2.0/fineui.js"></script>
+</head>
+<body>
+<div id="wrapper"></div>
+<script>
+    var Model = BI.inherit(Fix.Model, {
+        state: function () {
+            return {
+                cls: "my-cls",
+                background: "red",
+                count: 0
+            };
+        }
+    });
+
+    BI.model("demo.model", Model);
+
+    var Widget = BI.inherit(BI.Widget, {
+        _store: function () {
+            return BI.Models.getModel("demo.model");
+        },
+        setup: function () {
+            var store = BI.useStore();
+            return function () {
+                return {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.button",
+                        cls: function () {
+                            return store.model.cls;
+                        },
+                        css: function () {
+                            return {
+                                background: store.model.background
+                            }
+                        },
+                        text: "按钮",
+                        handler: function () {
+                            store.model.cls = "my-cls" + store.model.count++;
+                            store.model.background = "blue";
+                        }
+                    }]
+                };
+            };
+        }
+    });
+    BI.shortcut("demo.hooks", Widget);
+    BI.createWidget({
+        type: "bi.absolute",
+        items: [{
+            el: {
+                type: "demo.hooks"
+            },
+            top: 100,
+            left: 100
+        }],
+        element: "#wrapper"
+    });
+</script>
+</body>
+</html>

src/base/collection/collection.js

@@ -22,8 +22,7 @@ BI.CollectionView = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.CollectionView.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.renderedCells = [];
         this.renderedKeys = [];

src/base/combination/combo.js

@@ -39,8 +39,7 @@
             });
         },
 
-        _init: function () {
+        render: function () {
-            BI.Combo.superclass._init.apply(this, arguments);
             var self = this, o = this.options;
             this._initCombo();
             this._initPullDownAction();

src/base/combination/expander.js

@@ -21,8 +21,7 @@ BI.Expander = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.Expander.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this._expanded = !!o.el.open;
         this._initExpander();

src/base/combination/group.button.js

@@ -20,8 +20,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.ButtonGroup.superclass._init.apply(this, arguments);
         var o = this.options;
         var behaviors = {};
         BI.each(o.behaviors, function (key, rule) {

src/base/combination/group.combo.js

@@ -30,8 +30,7 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.ComboGroup.superclass._init.apply(this, arguments);
         this._populate(this.options.el);
     },
 

src/base/combination/loader.js

@@ -53,8 +53,7 @@ BI.Loader = BI.inherit(BI.Widget, {
         }]);
     },
 
-    _init: function () {
+    render: function () {
-        BI.Loader.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         if (o.itemsCreator === false) {
             o.prev = false;

src/base/combination/searcher.js

@@ -42,8 +42,7 @@ BI.Searcher = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.Searcher.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
 
         this.editor = BI.createWidget(o.el, {

src/base/combination/switcher.js

@@ -22,8 +22,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.Switcher.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this._initSwitcher();
         this._initPullDownAction();

src/base/combination/tree.button.js

@@ -11,10 +11,6 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
         });
     },
 
-    _init: function () {
-        BI.ButtonTree.superclass._init.apply(this, arguments);
-    },
-
     setNotSelectedValue: function (v) {
         v = BI.isArray(v) ? v : [v];
         BI.each(this.buttons, function (i, item) {

src/base/grid/grid.js

@@ -25,8 +25,7 @@ BI.GridView = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.GridView.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         this.renderedCells = [];
         this.renderedKeys = [];

src/base/layer/layer.popup.js

@@ -42,8 +42,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.PopupView.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         var fn = function (e) {
             e.stopPropagation();

src/base/layer/layer.searcher.js

@@ -41,8 +41,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.SearcherView.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
 
         this.matcher = BI.createWidget(o.matcher, {

src/base/pager/pager.js

@@ -40,8 +40,8 @@ BI.Pager = BI.inherit(BI.Widget, {
             hasNext: BI.emptyFn  // pages不可用时有效
         });
     },
-    _init: function () {
+
-        BI.Pager.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this;
         this.currPage = BI.result(this.options, "curr");
         // 翻页太灵敏

src/base/single/a/a.js

@@ -17,9 +17,9 @@ BI.A = BI.inherit(BI.Text, {
             tagName: "a"
         });
     },
-    _init: function () {
+
+    render: function () {
         var o = this.options;
-        BI.A.superclass._init.apply(this, arguments);
         this.element.attr({href: o.href, target: o.target});
         if (o.el) {
             BI.createWidget(o.el, {

src/base/single/bar/bar.loading.js

@@ -12,8 +12,8 @@ BI.LoadingBar = BI.inherit(BI.Single, {
             handler: BI.emptyFn
         });
     },
-    _init: function () {
+
-        BI.LoadingBar.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this;
         this.loaded = BI.createWidget({
             type: "bi.text_button",

src/base/single/button/buttons/button.icon.js

@@ -13,8 +13,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.IconButton.superclass._init.apply(this, arguments);
         var o = this.options;
         this.element.css({
             textAlign: "center"

src/base/single/button/buttons/button.image.js

@@ -16,8 +16,7 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.ImageButton.superclass._init.apply(this, arguments);
         var o = this.options;
         this.image = BI.createWidget({
             type: "bi.img",

src/base/single/button/buttons/button.js

@@ -39,8 +39,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.Button.superclass._init.apply(this, arguments);
         var o = this.options, self = this;
         if (BI.isKey(o.iconCls)) {
             this.icon = BI.createWidget({

src/base/single/button/buttons/button.text.js

@@ -22,8 +22,7 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.TextButton.superclass._init.apply(this, arguments);
         var o = this.options;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/listitem/blankiconicontextitem.js

@@ -25,8 +25,8 @@ BI.BlankIconIconTextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.BlankIconIconTextItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         var blank = BI.createWidget({
             type: "bi.layout",

src/base/single/button/listitem/blankicontexticonitem.js

@@ -26,8 +26,8 @@ BI.BlankIconTextIconItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.BlankIconTextIconItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/listitem/blankicontextitem.js

@@ -24,8 +24,8 @@ BI.BlankIconTextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.BlankIconTextItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         var blank = BI.createWidget({
             type: "bi.layout",

src/base/single/button/listitem/icontexticonitem.js

@@ -25,8 +25,8 @@ BI.IconTextIconItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.IconTextIconItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/listitem/icontextitem.js

@@ -25,8 +25,8 @@ BI.IconTextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.IconTextItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/listitem/texticonitem.js

@@ -24,8 +24,8 @@ BI.TextIconItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.TextIconItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/listitem/textitem.js

@@ -20,8 +20,8 @@ BI.TextItem = BI.inherit(BI.BasicButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.TextItem.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/node/icontexticonnode.js

@@ -23,8 +23,8 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.IconTextIconNode.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/node/icontextnode.js

@@ -22,8 +22,8 @@ BI.IconTextNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.IconTextNode.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/node/texticonnode.js

@@ -21,8 +21,8 @@ BI.TextIconNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.TextIconNode.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options, c = this._const;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/button/node/textnode.js

@@ -19,8 +19,8 @@ BI.TextNode = BI.inherit(BI.NodeButton, {
             textRgap: 0
         });
     },
-    _init: function () {
+
-        BI.TextNode.superclass._init.apply(this, arguments);
+    render: function () {
         var o = this.options;
         this.text = BI.createWidget({
             type: "bi.label",

src/base/single/editor/editor.js

@@ -26,8 +26,7 @@ BI.Editor = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.Editor.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
         // 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
         var autocomplete = o.autocomplete ? " autocomplete=" + o.autocomplete : "";

src/base/single/editor/editor.multifile.js

@@ -18,8 +18,7 @@ BI.MultifileEditor = BI.inherit(BI.Widget, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        var self = this, o = this.options;
         BI.MultifileEditor.superclass._init.apply(this, arguments);
         this.file = BI.createWidget({
             type: "bi.file",

src/base/single/icon/icon.js

@@ -11,8 +11,8 @@ BI.Icon = BI.inherit(BI.Single, {
             baseCls: (conf.baseCls || "") + " x-icon b-font horizon-center display-block"
         });
     },
-    _init: function () {
+
-        BI.Icon.superclass._init.apply(this, arguments);
+    render: function () {
         if (BI.isIE9Below && BI.isIE9Below()) {
             this.element.addClass("hack");
         }

src/base/single/iframe/iframe.js

@@ -18,9 +18,8 @@ BI.Iframe = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
+    render: function () {
         var self = this;
-        BI.Iframe.superclass._init.apply(this, arguments);
         this.element.on("load", function () {
             self.fireEvent("EVENT_LOADED");
         });

src/base/single/input/file.js

@@ -451,9 +451,8 @@
             });
         },
 
-        _init: function () {
+        render: function () {
             var self = this, o = this.options;
-            BI.File.superclass._init.apply(this, arguments);
             if (o.multiple === true) {
                 this.element.attr("multiple", "multiple");
             }

src/base/single/input/input.js

@@ -16,8 +16,7 @@ BI.Input = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
+    render: function () {
-        BI.Input.superclass._init.apply(this, arguments);
         var self = this;
         var ctrlKey = false;
         var keyCode = null;

src/base/single/input/radio/radio.image.js

@@ -17,10 +17,6 @@ BI.ImageRadio = BI.inherit(BI.IconButton, {
         });
     },
 
-    _init: function () {
-        BI.ImageRadio.superclass._init.apply(this, arguments);
-    },
-
     doClick: function () {
         BI.ImageRadio.superclass.doClick.apply(this, arguments);
         if(this.isValid()) {

src/base/single/label/abstract.label.js

@@ -38,9 +38,7 @@
             };
         },
 
-        _init: function () {
+        render: function () {
-            BI.AbstractLabel.superclass._init.apply(this, arguments);
-
             if (this.options.textAlign === "center") {
                 this._createCenterEl();
             } else {

src/base/single/label/icon.label.js

@@ -11,8 +11,7 @@ BI.IconLabel = BI.inherit(BI.Single, {
         iconHeight: null
     },
 
-    _init: function () {
+    render: function () {
-        BI.IconLabel.superclass._init.apply(this, arguments);
         var o = this.options;
         this.element.css({
             textAlign: "center"

src/base/single/tip/tip.toast.js

@@ -18,8 +18,8 @@ BI.Toast = BI.inherit(BI.Tip, {
             level: "success" // success或warning
         });
     },
-    _init: function () {
+
-        BI.Toast.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         this.element.css({
             minWidth: this._const.minWidth / BI.pixRatio + BI.pixUnit

src/base/single/tip/tip.tooltip.js

@@ -20,8 +20,8 @@ BI.Tooltip = BI.inherit(BI.Tip, {
             stopPropagation: false
         });
     },
-    _init: function () {
+
-        BI.Tooltip.superclass._init.apply(this, arguments);
+    render: function () {
         var self = this, o = this.options;
         this.element.addClass("tooltip-" + o.level);
         var fn = function (e) {

src/base/single/trigger/trigger.js

@@ -13,10 +13,6 @@ BI.Trigger = BI.inherit(BI.Single, {
         });
     },
 
-    _init: function () {
-        BI.Trigger.superclass._init.apply(this, arguments);
-    },
-
     setKey: function () {
 
     },

src/case/combo/bubblecombo/popup.bubble.js

@@ -13,9 +13,6 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
             maxWidth: 300,
             minHeight: 90
         });
-    },
-    _init: function () {
-        BI.BubblePopupView.superclass._init.apply(this, arguments);
     }
 });
 

src/core/4.widget.js

@@ -38,7 +38,7 @@
                 baseCls: "",
                 extraCls: "",
                 cls: "",
-                css: null,
+                css: null
 
                 // vdom: false
             });
@@ -157,9 +157,21 @@
         },
 
         _initCurrent: function () {
-            var o = this.options;
+            var self = this, o = this.options;
-            if (o._baseCls || o.baseCls || o.extraCls || o.cls) {
+            if (o._baseCls || o.baseCls || o.extraCls) {
-                this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || "") + " " + (o.cls || ""));
+                this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || ""));
+            }
+            if (o.cls) {
+                if (BI.isFunction(o.cls)) {
+                    var cls = this.__watch(o.cls, function (newValue) {
+                        if (newValue !== cls) {
+                            self.element.removeClass(cls).addClass(cls = newValue);
+                        }
+                    });
+                    this.element.addClass(cls);
+                } else {
+                    this.element.addClass(o.cls);
+                }
             }
             if (o.key != null) {
                 this.element.attr("key", o.key);
@@ -171,8 +183,31 @@
                 this.element.data(o.data);
             }
             if (o.css) {
+                if (BI.isFunction(o.css)) {
+                    var css = this.__watch(o.css, function (newValue) {
+                        for (var k in css) {
+                            if (!newValue[k]) {
+                                newValue[k] = "";
+                            }
+                        }
+                        self.element.css(css = newValue);
+                    });
+                    this.element.css(css);
+                } else {
                     this.element.css(o.css);
                 }
+            }
+        },
+
+        __watch: function (getter, handler) {
+            if (Fix.Model.target) {
+                this._watchers = this._watchers || [];
+                var watcher = new Fix.Watcher(Fix.Model.target, BI.bind(getter, this), handler || BI.emptyFn);
+                this._watchers.push(watcher);
+                return watcher.value;
+            } else {
+                return getter();
+            }
         },
 
         /**
@@ -233,6 +268,9 @@
                     this.setValid(false);
                 }
             }
+            if (o.effect) {
+                this.__watch(o.effect);
+            }
         },
 
         _initState: function () {