支持自动watch

3 years ago · 2ee97f0291
48 changed files with 255 additions and 287 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,6 @@
 # 更新日志
 2.0(2021-09)
+- 支持自动watch
 - 支持h函数传递left、right，优化left_right_vertical_adapt布局的jsx写法
 - 新增bi.virtual_group_list组件

--- a/examples/dev.html
+++ b/examples/dev.html
@ -12,187 +12,31 @@
    var Model = BI.inherit(Fix.Model, {
        state: function () {
            return {
-                expand: false,
-                showClearAll: false,
-                hasUndo: false,
-                hasRedo: false
+                count: 0
            };
-        },
-
-        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 clearAllComponent = useClearAll();
-            var undoComponent = useUndo();
-            var redoComponent = useRedo();
+            var store = BI.useStore();
            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++;
+                        }
+                    }]
                };
            };
        }
--- a/examples/effect.html
+++ b/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>
--- a/examples/style.html
+++ b/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>
--- a/src/base/collection/collection.js
+++ b/src/base/collection/collection.js
@ -22,8 +22,7 @@ BI.CollectionView = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.CollectionView.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;
        this.renderedCells = [];
        this.renderedKeys = [];
--- a/src/base/combination/combo.js
+++ b/src/base/combination/combo.js
@ -39,8 +39,7 @@
            });
        },

-        _init: function () {
-            BI.Combo.superclass._init.apply(this, arguments);
+        render: function () {
            var self = this, o = this.options;
            this._initCombo();
            this._initPullDownAction();
--- a/src/base/combination/expander.js
+++ b/src/base/combination/expander.js
@ -21,8 +21,7 @@ BI.Expander = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.Expander.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;
        this._expanded = !!o.el.open;
        this._initExpander();
@ -279,4 +278,4 @@ BI.Expander.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
 BI.Expander.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
 BI.Expander.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";

-BI.shortcut("bi.expander", BI.Expander);
+BI.shortcut("bi.expander", BI.Expander);
--- a/src/base/combination/group.button.js
+++ b/src/base/combination/group.button.js
@ -20,8 +20,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.ButtonGroup.superclass._init.apply(this, arguments);
+    render: function () {
        var o = this.options;
        var behaviors = {};
        BI.each(o.behaviors, function (key, rule) {
@ -327,4 +326,4 @@ BI.extend(BI.ButtonGroup, {
 });
 BI.ButtonGroup.EVENT_CHANGE = "EVENT_CHANGE";

-BI.shortcut("bi.button_group", BI.ButtonGroup);
+BI.shortcut("bi.button_group", BI.ButtonGroup);
--- a/src/base/combination/group.combo.js
+++ b/src/base/combination/group.combo.js
@ -30,8 +30,7 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.ComboGroup.superclass._init.apply(this, arguments);
+    render: function () {
        this._populate(this.options.el);
    },

@ -94,4 +93,4 @@ BI.ComboGroup = BI.inherit(BI.Widget, {
 });
 BI.ComboGroup.EVENT_CHANGE = "EVENT_CHANGE";

-BI.shortcut("bi.combo_group", BI.ComboGroup);
+BI.shortcut("bi.combo_group", BI.ComboGroup);
--- a/src/base/combination/loader.js
+++ b/src/base/combination/loader.js
@ -53,8 +53,7 @@ BI.Loader = BI.inherit(BI.Widget, {
        }]);
    },

-    _init: function () {
-        BI.Loader.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;
        if (o.itemsCreator === false) {
            o.prev = false;
--- a/src/base/combination/searcher.js
+++ b/src/base/combination/searcher.js
@ -42,8 +42,7 @@ BI.Searcher = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.Searcher.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;

        this.editor = BI.createWidget(o.el, {
@ -317,4 +316,4 @@ BI.Searcher.EVENT_PAUSE = "EVENT_PAUSE";
 BI.Searcher.EVENT_SEARCHING = "EVENT_SEARCHING";
 BI.Searcher.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";

-BI.shortcut("bi.searcher", BI.Searcher);
+BI.shortcut("bi.searcher", BI.Searcher);
--- a/src/base/combination/switcher.js
+++ b/src/base/combination/switcher.js
@ -22,8 +22,7 @@ BI.Switcher = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.Switcher.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;
        this._initSwitcher();
        this._initPullDownAction();
@ -289,4 +288,4 @@ BI.Switcher.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
 BI.Switcher.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW";
 BI.Switcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";

-BI.shortcut("bi.switcher", BI.Switcher);
+BI.shortcut("bi.switcher", BI.Switcher);
--- a/src/base/combination/tree.button.js
+++ b/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) {
@ -179,4 +175,4 @@ BI.ButtonTree = BI.inherit(BI.ButtonGroup, {
 });
 BI.ButtonTree.EVENT_CHANGE = "EVENT_CHANGE";

-BI.shortcut("bi.button_tree", BI.ButtonTree);
+BI.shortcut("bi.button_tree", BI.ButtonTree);
--- a/src/base/grid/grid.js
+++ b/src/base/grid/grid.js
@ -25,8 +25,7 @@ BI.GridView = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.GridView.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;
        this.renderedCells = [];
        this.renderedKeys = [];
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@ -42,8 +42,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        BI.PopupView.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;
        var fn = function (e) {
            e.stopPropagation();
--- a/src/base/layer/layer.searcher.js
+++ b/src/base/layer/layer.searcher.js
@ -41,8 +41,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
        });
    },

-    _init: function () {
-        BI.SearcherView.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this, o = this.options;

        this.matcher = BI.createWidget(o.matcher, {
@ -138,4 +137,4 @@ BI.SearcherView = BI.inherit(BI.Pane, {
 });
 BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";

-BI.shortcut("bi.searcher_view", BI.SearcherView);
+BI.shortcut("bi.searcher_view", BI.SearcherView);
--- a/src/base/pager/pager.js
+++ b/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");
        // 翻页太灵敏
@ -286,4 +286,4 @@ BI.Pager = BI.inherit(BI.Widget, {
 });
 BI.Pager.EVENT_CHANGE = "EVENT_CHANGE";
 BI.Pager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
-BI.shortcut("bi.pager", BI.Pager);
+BI.shortcut("bi.pager", BI.Pager);
--- a/src/base/single/a/a.js
+++ b/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, {
@ -29,4 +29,4 @@ BI.A = BI.inherit(BI.Text, {
    }
 });

-BI.shortcut("bi.a", BI.A);
+BI.shortcut("bi.a", BI.A);
--- a/src/base/single/bar/bar.loading.js
+++ b/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",
@ -77,4 +77,4 @@ BI.LoadingBar = BI.inherit(BI.Single, {
    }
 });

-BI.shortcut("bi.loading_bar", BI.LoadingBar);
+BI.shortcut("bi.loading_bar", BI.LoadingBar);
--- a/src/base/single/button/buttons/button.icon.js
+++ b/src/base/single/button/buttons/button.icon.js
@ -13,8 +13,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
        });
    },

-    _init: function () {
-        BI.IconButton.superclass._init.apply(this, arguments);
+    render: function () {
        var o = this.options;
        this.element.css({
            textAlign: "center"
--- a/src/base/single/button/buttons/button.image.js
+++ b/src/base/single/button/buttons/button.image.js
@ -16,8 +16,7 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
        });
    },

-    _init: function () {
-        BI.ImageButton.superclass._init.apply(this, arguments);
+    render: function () {
        var o = this.options;
        this.image = BI.createWidget({
            type: "bi.img",
@ -84,4 +83,4 @@ BI.ImageButton = BI.inherit(BI.BasicButton, {
    }
 });
 BI.ImageButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.image_button", BI.ImageButton);
+BI.shortcut("bi.image_button", BI.ImageButton);
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@ -39,8 +39,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
        });
    },

-    _init: function () {
-        BI.Button.superclass._init.apply(this, arguments);
+    render: function () {
        var o = this.options, self = this;
        if (BI.isKey(o.iconCls)) {
            this.icon = BI.createWidget({
--- a/src/base/single/button/buttons/button.text.js
+++ b/src/base/single/button/buttons/button.text.js
@ -22,8 +22,7 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
        });
    },

-    _init: function () {
-        BI.TextButton.superclass._init.apply(this, arguments);
+    render: function () {
        var o = this.options;
        this.text = BI.createWidget({
            type: "bi.label",
@ -87,4 +86,4 @@ BI.TextButton = BI.inherit(BI.BasicButton, {
    }
 });
 BI.TextButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_button", BI.TextButton);
+BI.shortcut("bi.text_button", BI.TextButton);
--- a/src/base/single/button/listitem/blankiconicontextitem.js
+++ b/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",
--- a/src/base/single/button/listitem/blankicontexticonitem.js
+++ b/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",
--- a/src/base/single/button/listitem/blankicontextitem.js
+++ b/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",
--- a/src/base/single/button/listitem/icontexticonitem.js
+++ b/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",
--- a/src/base/single/button/listitem/icontextitem.js
+++ b/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",
--- a/src/base/single/button/listitem/texticonitem.js
+++ b/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",
--- a/src/base/single/button/listitem/textitem.js
+++ b/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",
@ -83,4 +83,4 @@ BI.TextItem = BI.inherit(BI.BasicButton, {
    }
 });
 BI.TextItem.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_item", BI.TextItem);
+BI.shortcut("bi.text_item", BI.TextItem);
--- a/src/base/single/button/node/icontexticonnode.js
+++ b/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",
@ -110,4 +110,4 @@ BI.IconTextIconNode = BI.inherit(BI.NodeButton, {
    }
 });
 BI.IconTextIconNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.icon_text_icon_node", BI.IconTextIconNode);
+BI.shortcut("bi.icon_text_icon_node", BI.IconTextIconNode);
--- a/src/base/single/button/node/icontextnode.js
+++ b/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",
@ -87,4 +87,4 @@ BI.IconTextNode = BI.inherit(BI.NodeButton, {
    }
 });
 BI.IconTextNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.icon_text_node", BI.IconTextNode);
+BI.shortcut("bi.icon_text_node", BI.IconTextNode);
--- a/src/base/single/button/node/texticonnode.js
+++ b/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",
@ -86,4 +86,4 @@ BI.TextIconNode = BI.inherit(BI.NodeButton, {
    }
 });
 BI.TextIconNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_icon_node", BI.TextIconNode);
+BI.shortcut("bi.text_icon_node", BI.TextIconNode);
--- a/src/base/single/button/node/textnode.js
+++ b/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",
@ -74,4 +74,4 @@ BI.TextNode = BI.inherit(BI.NodeButton, {
    }
 });
 BI.TextNode.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.text_node", BI.TextNode);
+BI.shortcut("bi.text_node", BI.TextNode);
--- a/src/base/single/editor/editor.js
+++ b/src/base/single/editor/editor.js
@ -26,8 +26,7 @@ BI.Editor = BI.inherit(BI.Single, {
        });
    },

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

-    _init: function () {
-        var self = this, o = this.options;
+    render: function () {
        BI.MultifileEditor.superclass._init.apply(this, arguments);
        this.file = BI.createWidget({
            type: "bi.file",
--- a/src/base/single/icon/icon.js
+++ b/src/base/single/icon/icon.js
@ -11,11 +11,11 @@ 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");
        }
    }
 });
-BI.shortcut("bi.icon", BI.Icon);
+BI.shortcut("bi.icon", BI.Icon);
--- a/src/base/single/iframe/iframe.js
+++ b/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");
        });
--- a/src/base/single/input/file.js
+++ b/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");
            }
--- a/src/base/single/input/input.js
+++ b/src/base/single/input/input.js
@ -16,8 +16,7 @@ BI.Input = BI.inherit(BI.Single, {
        });
    },

-    _init: function () {
-        BI.Input.superclass._init.apply(this, arguments);
+    render: function () {
        var self = this;
        var ctrlKey = false;
        var keyCode = null;
--- a/src/base/single/input/radio/radio.image.js
+++ b/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()) {
@ -30,4 +26,4 @@ BI.ImageRadio = BI.inherit(BI.IconButton, {
 });
 BI.ImageRadio.EVENT_CHANGE = BI.IconButton.EVENT_CHANGE;

-BI.shortcut("bi.image_radio", BI.ImageRadio);
+BI.shortcut("bi.image_radio", BI.ImageRadio);
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@ -38,9 +38,7 @@
            };
        },

-        _init: function () {
-            BI.AbstractLabel.superclass._init.apply(this, arguments);
-
+        render: function () {
            if (this.options.textAlign === "center") {
                this._createCenterEl();
            } else {
--- a/src/base/single/label/icon.label.js
+++ b/src/base/single/label/icon.label.js
@ -11,8 +11,7 @@ BI.IconLabel = BI.inherit(BI.Single, {
        iconHeight: null
    },

-    _init: function () {
-        BI.IconLabel.superclass._init.apply(this, arguments);
+    render: function () {
        var o = this.options;
        this.element.css({
            textAlign: "center"
--- a/src/base/single/tip/tip.toast.js
+++ b/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
--- a/src/base/single/tip/tip.tooltip.js
+++ b/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) {
@ -81,4 +81,4 @@ BI.Tooltip = BI.inherit(BI.Tip, {
    }
 });

-BI.shortcut("bi.tooltip", BI.Tooltip);
+BI.shortcut("bi.tooltip", BI.Tooltip);
--- a/src/base/single/trigger/trigger.js
+++ b/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 () {

    },
@ -24,4 +20,4 @@ BI.Trigger = BI.inherit(BI.Single, {
    getKey: function () {

    },
-});
+});
--- a/src/case/combo/bubblecombo/popup.bubble.js
+++ b/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);
    }
 });

--- a/src/core/4.widget.js
+++ b/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;
-            if (o._baseCls || o.baseCls || o.extraCls || o.cls) {
-                this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || "") + " " + (o.cls || ""));
+            var self = this, o = this.options;
+            if (o._baseCls || o.baseCls || o.extraCls) {
+                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,7 +183,30 @@
                this.element.data(o.data);
            }
            if (o.css) {
-                this.element.css(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 () {