支持自动watch

3 years ago · 411d3d2b59
4 changed files with 111 additions and 12 deletions
--- a/examples/dev.html
+++ b/examples/dev.html
@ -12,7 +12,7 @@
    var Model = BI.inherit(Fix.Model, {
        state: function () {
            return {
-                count: 0
+                columnSize: [200, "fill"]
            };
        }
    });
@ -20,6 +20,10 @@
    BI.model("demo.model", Model);
    var Widget = BI.inherit(BI.Widget, {
        props: {
            height: 200,
            width: 600
        },
        _store: function () {
            return BI.Models.getModel("demo.model");
        },
@ -27,15 +31,27 @@
            var store = BI.useStore();
            return function () {
                return {
-                    type: "bi.vertical",
+                    type: "bi.htape",
                    columnSize: function () {
                        return store.model.columnSize;
                    },
                    items: [{
-                        type: "bi.button",
+                        type: "bi.label",
-                        effect: function () {
+                        css: {
-                            this.setText(store.model.count)
+                            background: "#eee"
                        },
                        handler: function () {
                            store.model.count++;
                        }
                    }, {
                        type: "bi.center_adapt",
                        css: {
                            background: "#e0e0e0"
                        },
                        items: [{
                            type: "bi.button",
                            text: "点击",
                            handler: function () {
                                store.model.columnSize = [300, "fill"]
                            }
                        }]
                    }]
                };
            };
--- a/examples/resize.html
+++ b/examples/resize.html
@ -0,0 +1,73 @@
 <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 {
                columnSize: [200, "fill"]
            };
        }
    });
    BI.model("demo.model", Model);
    var Widget = BI.inherit(BI.Widget, {
        props: {
            height: 200,
            width: 600
        },
        _store: function () {
            return BI.Models.getModel("demo.model");
        },
        setup: function () {
            var store = BI.useStore();
            return function () {
                return {
                    type: "bi.htape",
                    columnSize: function () {
                        return store.model.columnSize;
                    },
                    items: [{
                        type: "bi.label",
                        css: {
                            background: "#eee"
                        }
                    }, {
                        type: "bi.center_adapt",
                        css: {
                            background: "#e0e0e0"
                        },
                        items: [{
                            type: "bi.button",
                            text: "点击",
                            handler: function () {
                                store.model.columnSize = [300, "fill"]
                            }
                        }]
                    }]
                };
            };
        }
    });
    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/core/4.widget.js
+++ b/src/core/4.widget.js
@ -163,7 +163,7 @@
            }
            if (o.cls) {
                if (BI.isFunction(o.cls)) {
-                    var cls = this.__watch(o.cls, function (newValue) {
+                    var cls = this.__watch(o.cls, function (context, newValue) {
                        self.element.removeClass(cls).addClass(cls = newValue);
                    });
                    this.element.addClass(cls);
@ -182,7 +182,7 @@
            }
            if (o.css) {
                if (BI.isFunction(o.css)) {
-                    var css = this.__watch(o.css, function (newValue) {
+                    var css = this.__watch(o.css, function (context, newValue) {
                        for (var k in css) {
                            if (!newValue[k]) {
                                newValue[k] = "";
@ -205,8 +205,8 @@
                this._watchers = this._watchers || [];
                var watcher = new Fix.Watcher(null, function () {
                    return getter.call(self, self);
-                }, (handler && function () {
+                }, (handler && function (v) {
-                    handler.call(self, self);
+                    handler.call(self, self, v);
                }) || BI.emptyFn, options);
                this._watchers.push(watcher);
                return watcher.value;
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -19,8 +19,18 @@ BI.Layout = BI.inherit(BI.Widget, {
    },
    render: function () {
        var self = this, o = this.options;
        this._init4Margin();
        this._init4Scroll();
        if (BI.isFunction(o.columnSize)) {
            var columnSizeFn = o.columnSize;
            o.columnSize = this.__watch(columnSizeFn, function (context, newValue) {
                o.columnSize = newValue;
                self.resize();
            }, {
                deep: true
            });
        }
    },
    _init4Margin: function () {