虚拟dom

examples/dev.html

@@ -48,7 +48,10 @@
                         type: "bi.vertical",
                         items: [{
                             type: "bi.button",
-                            text: store.model.text
+                            text: store.model.text,
+                            handler: function () {
+                                console.log("click");
+                            }
                         }, {
                             type: "bi.label",
                             text: store.model.text
@@ -62,7 +65,12 @@
 
     var Widget = BI.inherit(BI.Widget, {
         props: {
-            updateMode: "auto"
+            vdom: true
+        },
+        watch: {
+            text: function () {
+                this.reset();
+            }
         },
         setup: function () {
             var child;
@@ -72,13 +80,13 @@
             setInterval(function () {
                 store.toggle();
             }, 1000);
-            BI.watch("text", function () {
+            // BI.watch("text", function () {
-                child.reset();
+            //     child.reset();
-            });
+            // });
             return function () {
                 return {
                     type: "bi.vertical",
-                    vgap: 20,
+                    vgap: store.model.expand ? 20 : 30,
                     items: [{
                         type: "demo.child",
                         ref: function (_ref) {

src/core/4.widget.js

@@ -38,7 +38,7 @@
                 extraCls: "",
                 cls: "",
                 css: null,
-                updateMode: "manual" // manual / auto
+                vdom: false
             });
         },
 
@@ -165,6 +165,7 @@
                 this.element = BI.Widget._renderEngine.createElement(this);
             }
             this.element._isWidget = true;
+            (this.element[0]._Widget = this.element[0]._Widget || []).push(this);
             this._initCurrent();
         },
 
@@ -216,6 +217,12 @@
                 els = [els];
             }
             if (BI.isArray(els)) {
+                if (this.options.vdom) {
+                    this.vnode = this._renderVNode();
+                    var div = document.createElement("div");
+                    this.element.append(div);
+                    BI.patchVNode(div, this.vnode);
+                } else {
                     BI.each(els, function (i, el) {
                         if (el) {
                             BI._lazyCreateWidget(el, {
@@ -224,14 +231,33 @@
                         }
                     });
                 }
+            }
             this._mount();
-
             if (this.__async === true && isMounted) {
                 callLifeHook(this, "mounted");
                 this.fireEvent(BI.Events.MOUNT);
             }
         },
 
+        _renderVNode: function () {
+            var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
+            var els = render && render.call(this);
+            if (BI.isPlainObject(els)) {
+                els = [els];
+            }
+            if (BI.isArray(els)) {
+                var container = document.createElement("div");
+                BI.each(els, function (i, el) {
+                    if (el) {
+                        BI._lazyCreateWidget(el, {
+                            element: container
+                        });
+                    }
+                });
+            }
+            return BI.Element2Snabbdom(container);
+        },
+
         _setParent: function (parent) {
             this._parent = parent;
         },
@@ -578,6 +604,12 @@
             if (this.__async === true || this.__asking === true) {
                 return;
             }
+            if (this.options.vdom) {
+                var vnode = this._renderVNode();
+                BI.patchVNode(this.vnode, vnode);
+                this.vnode = vnode;
+                return;
+            }
             // this._isMounted = false;
             // this.purgeListeners();
             this._empty();

src/core/element2Snabbdom.js

@@ -0,0 +1,42 @@
+!function () {
+    var patch = BI.Snabbdom.init([BI.Snabbdom.attributesModule, BI.Snabbdom.classModule, BI.Snabbdom.datasetModule, BI.Snabbdom.propsModule, BI.Snabbdom.styleModule, BI.Snabbdom.eventListenersModule]);
+    BI.Element2Snabbdom = function (parentNode) {
+        if (parentNode.nodeType === 3) {
+            return parentNode.textContent;
+        }
+        var data = BI.jQuery._data(parentNode);
+        var on = {};
+        BI.each(data && data.events, function (eventName, events) {
+            on[eventName] = function () {
+                var ob = this, args = arguments;
+                BI.each(events, function (i, ev) {
+                    ev.handler.apply(ob, args);
+                });
+            };
+        });
+        var style = parentNode.getAttribute("style");
+        // var claz = parentNode.getAttribute("class");
+        var vnode = BI.Snabbdom.h(parentNode.nodeName, {
+            class: BI.makeObject(parentNode.classList),
+            props: {
+                style: style
+            },
+            on: on,
+            hook: {
+                create: function () {
+                    BI.each(parentNode._Widget, function (i, w) {
+                        w.element = $(vnode.elm);
+                    });
+                }
+            }
+        }, BI.map(parentNode.childNodes, function (i, childNode) {
+            return BI.Element2Snabbdom(childNode);
+        }));
+        return vnode;
+    };
+
+    BI.patchVNode = function (element, node) {
+        patch(element, node);
+    };
+}();
+