Merge branch 'master' of http://www.finedevelop.com:2015/scm/~urthur/fineui

bi/core.js

@@ -4804,7 +4804,7 @@ BI.Widget = BI.inherit(BI.OB, {
     __d: function () {
         this.beforeDestroy && this.beforeDestroy();
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this._parent = null;
@@ -4827,7 +4827,7 @@ BI.Widget = BI.inherit(BI.OB, {
 
     empty: function () {
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this.element.empty();
@@ -11527,33 +11527,167 @@ BI.Layout = BI.inherit(BI.Widget, {
         })
     },
 
-    update: function (opt) {
+    patchItem: function (oldVnode, vnode, index) {
-        var o = this.options;
+        if (!this._compare(oldVnode, vnode)) {
-        var items = opt.items || [];
+            return this.updateItemAt(index, vnode);
-        var updated, i, len;
+        }
-        for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+    },
-            if (!this._compare(o.items[i], items[i])) {
+
-                updated = this.updateItemAt(i, items[i]) || updated;
+    updateChildren: function (oldCh, newCh) {
+        var self = this;
+        var oldStartIdx = 0, newStartIdx = 0;
+        var oldEndIdx = oldCh.length - 1;
+        var oldStartVnode = oldCh[0];
+        var oldEndVnode = oldCh[oldEndIdx];
+        var newEndIdx = newCh.length - 1;
+        var newStartVnode = newCh[0];
+        var newEndVnode = newCh[newEndIdx];
+        var oldKeyToIdx;
+        var idxInOld;
+        var elmToMove;
+        var before;
+        var updated;
+        var children = {};
+        BI.each(oldCh, function (i, child) {
+            child = self._getOptions(child);
+            var key = child.key == null ? i : child.key;
+            if (BI.isKey(key)) {
+                children[key] = self._children[self._getChildName(i)];
+            }
+        });
+
+        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+            if (BI.isNull(oldStartVnode)) {
+                oldStartVnode = oldCh[++oldStartIdx];
+            } else if (BI.isNull(oldEndVnode)) {
+                oldEndVnode = oldCh[--oldEndIdx];
+            } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) {
+                updated = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx) || updated;
+                oldStartVnode = oldCh[++oldStartIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) {
+                updated = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx) || updated;
+                oldEndVnode = oldCh[--oldEndIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldStartVnode, newEndVnode)) {
+                updated = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx) || updated;
+                insertBefore(oldStartVnode, oldEndVnode, true);
+                oldStartVnode = oldCh[++oldStartIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldEndVnode, newStartVnode)) {
+                updated = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx) || updated;
+                insertBefore(oldEndVnode, oldStartVnode);
+                oldEndVnode = oldCh[--oldEndIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else {
+                var node = addNode(newStartVnode);
+                insertBefore(node, oldStartVnode);
+                newStartVnode = newCh[++newStartIdx];
             }
         }
-        if (o.items.length > items.length) {
+        if (oldStartIdx > oldEndIdx) {
-            var deleted = [];
+            before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
-            for (i = items.length; i < o.items.length; i++) {
+            addVnodes(before, newCh, newStartIdx, newEndIdx);
-                deleted.push(this._children[this._getChildName(i)]);
+        } else if (newStartIdx > newEndIdx) {
-                delete this._children[this._getChildName(i)];
+            removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+        }
+
+        this._children = {};
+        BI.each(newCh, function (i, child) {
+            var node = self._getOptions(child);
+            var key = node.key == null ? i : node.key;
+            self._children[self._getChildName(i)] = children[key];
+        });
+
+        function sameVnode(vnode1, vnode2, oldIndex, newIndex) {
+            vnode1 = self._getOptions(vnode1);
+            vnode2 = self._getOptions(vnode2);
+            if (BI.isKey(vnode1.key)) {
+                return vnode1.key === vnode2.key;
             }
-            o.items.splice(items.length);
+            if (oldIndex >= 0) {
-            BI.each(deleted, function (i, w) {
+                return oldIndex === newIndex
-                w._destroy();
+            }
-            })
+        }
-        } else if (items.length > o.items.length) {
+
-            for (i = o.items.length; i < items.length; i++) {
+        function addNode(vnode, index) {
-                this.addItemAt(i, items[i]);
+            var opt = self._getOptions(vnode);
+            var key = opt.key == null ? i : opt.key;
+            return children[key] = self._addElement(key, vnode);
+        }
+
+        function addVnodes(before, vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = addNode(vnodes[startIdx], startIdx);
+                insertBefore(node, before);
             }
         }
+
+        function removeVnodes(vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = self._getOptions(vnodes[startIdx]);
+                var key = node.key == null ? startIdx : node.key;
+                children[key]._destroy();
+            }
+        }
+
+        function insertBefore(insert, before, isNext) {
+            insert = self._getOptions(insert);
+            before = before && self._getOptions(before);
+            if (BI.isKey(insert.key)) {
+                if (before && children[before.key]) {
+                    var next;
+                    if (isNext) {
+                        next = children[before.key].element.next();
+                    } else {
+                        next = children[before.key].element;
+                    }
+                    if (next.length > 0) {
+                        next.before(children[insert.key].element);
+                    } else {
+                        self._getWrapper().append(children[insert.key].element);
+                    }
+                } else {
+                    self._getWrapper().append(children[insert.key].element);
+                }
+            } else {
+                throw "key is not defined";
+            }
+        }
+
         return updated;
     },
 
+    update: function (opt) {
+        var o = this.options;
+        var items = opt.items || [];
+        var updated = this.updateChildren(o.items, items);
+        this.options.items = items;
+        return updated;
+        // var updated, i, len;
+        // for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+        //     if (!this._compare(o.items[i], items[i])) {
+        //         updated = this.updateItemAt(i, items[i]) || updated;
+        //     }
+        // }
+        // if (o.items.length > items.length) {
+        //     var deleted = [];
+        //     for (i = items.length; i < o.items.length; i++) {
+        //         deleted.push(this._children[this._getChildName(i)]);
+        //         delete this._children[this._getChildName(i)];
+        //     }
+        //     o.items.splice(items.length);
+        //     BI.each(deleted, function (i, w) {
+        //         w._destroy();
+        //     })
+        // } else if (items.length > o.items.length) {
+        //     for (i = o.items.length; i < items.length; i++) {
+        //         this.addItemAt(i, items[i]);
+        //     }
+        // }
+        // return updated;
+    },
+
     stroke: function (items) {
         var self = this;
         BI.each(items, function (i, item) {

bi/sliders.js

@@ -1862,7 +1862,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
         this.blueTrack = BI.createWidget({
             type: "bi.layout",
-            cls: "blue-track",
+            cls: "blue-track bi-high-light-background",
             height: 6
         });
         if (this.options.color) {

demo/js/core/abstract/demo.virtual_group.js

@@ -4,19 +4,29 @@ Demo.Func = BI.inherit(BI.Widget, {
     },
 
     _createItems: function () {
-        var items = BI.makeArray(1000, {
+        var items = BI.map(BI.range(1000), function (i) {
-            type: "demo.virtual_group_item"
+            return {
+                type: "demo.virtual_group_item",
+                value: i,
+                key: i + 1
+            }
         });
-        items[0].value = BI.UUID();
         return items;
     },
 
     render: function () {
         var self = this;
+        var buttonGroupItems = self._createItems();
+        var virtualGroupItems = self._createItems();
         return {
             type: "bi.vertical",
             vgap: 20,
             items: [{
+                type: "bi.label",
+                cls: "layout-bg5",
+                height: 50,
+                text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出"
+            }, {
                 type: "bi.button_group",
                 width: 500,
                 height: 300,
@@ -26,17 +36,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                 chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
                 layouts: [{
                     type: "bi.vertical"
-                }, {
-                    type: "bi.center_adapt",
                 }],
                 items: this._createItems()
             }, {
                 type: "bi.button",
                 text: "演示button_group的刷新",
                 handler: function () {
-                    var items = self._createItems();
+                    buttonGroupItems.shift();
-                    items.pop();
+                    self.buttonGroup.populate(BI.deepClone(buttonGroupItems));
-                    self.buttonGroup.populate(items);
                 }
             }, {
                 type: "bi.virtual_group",
@@ -48,17 +55,14 @@ Demo.Func = BI.inherit(BI.Widget, {
                 chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
                 layouts: [{
                     type: "bi.vertical"
-                }, {
-                    type: "bi.center_adapt",
                 }],
                 items: this._createItems()
             }, {
                 type: "bi.button",
                 text: "演示virtual_group的刷新",
                 handler: function () {
-                    var items = self._createItems();
+                    virtualGroupItems.shift();
-                    items.pop();
+                    self.virtualGroup.populate(BI.deepClone(virtualGroupItems));
-                    self.virtualGroup.populate(items);
                 }
             }]
 
@@ -74,14 +78,14 @@ Demo.Item = BI.inherit(BI.Widget, {
     },
 
     render: function () {
-        var self = this;
+        var self = this, o = this.options;
         return {
             type: "bi.label",
             ref: function () {
                 self.label = this;
             },
             height: this.options.height,
-            text: "这是一个测试项" + BI.UUID()
+            text: "key:" + o.key + ",随机数" + BI.UUID()
         }
     },
 

dist/bundle.js

@@ -14791,7 +14791,7 @@ BI.Widget = BI.inherit(BI.OB, {
     __d: function () {
         this.beforeDestroy && this.beforeDestroy();
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this._parent = null;
@@ -14814,7 +14814,7 @@ BI.Widget = BI.inherit(BI.OB, {
 
     empty: function () {
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this.element.empty();
@@ -19883,33 +19883,167 @@ BI.Layout = BI.inherit(BI.Widget, {
         })
     },
 
-    update: function (opt) {
+    patchItem: function (oldVnode, vnode, index) {
-        var o = this.options;
+        if (!this._compare(oldVnode, vnode)) {
-        var items = opt.items || [];
+            return this.updateItemAt(index, vnode);
-        var updated, i, len;
+        }
-        for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+    },
-            if (!this._compare(o.items[i], items[i])) {
+
-                updated = this.updateItemAt(i, items[i]) || updated;
+    updateChildren: function (oldCh, newCh) {
+        var self = this;
+        var oldStartIdx = 0, newStartIdx = 0;
+        var oldEndIdx = oldCh.length - 1;
+        var oldStartVnode = oldCh[0];
+        var oldEndVnode = oldCh[oldEndIdx];
+        var newEndIdx = newCh.length - 1;
+        var newStartVnode = newCh[0];
+        var newEndVnode = newCh[newEndIdx];
+        var oldKeyToIdx;
+        var idxInOld;
+        var elmToMove;
+        var before;
+        var updated;
+        var children = {};
+        BI.each(oldCh, function (i, child) {
+            child = self._getOptions(child);
+            var key = child.key == null ? i : child.key;
+            if (BI.isKey(key)) {
+                children[key] = self._children[self._getChildName(i)];
+            }
+        });
+
+        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+            if (BI.isNull(oldStartVnode)) {
+                oldStartVnode = oldCh[++oldStartIdx];
+            } else if (BI.isNull(oldEndVnode)) {
+                oldEndVnode = oldCh[--oldEndIdx];
+            } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) {
+                updated = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx) || updated;
+                oldStartVnode = oldCh[++oldStartIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) {
+                updated = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx) || updated;
+                oldEndVnode = oldCh[--oldEndIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldStartVnode, newEndVnode)) {
+                updated = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx) || updated;
+                insertBefore(oldStartVnode, oldEndVnode, true);
+                oldStartVnode = oldCh[++oldStartIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldEndVnode, newStartVnode)) {
+                updated = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx) || updated;
+                insertBefore(oldEndVnode, oldStartVnode);
+                oldEndVnode = oldCh[--oldEndIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else {
+                var node = addNode(newStartVnode);
+                insertBefore(node, oldStartVnode);
+                newStartVnode = newCh[++newStartIdx];
+            }
+        }
+        if (oldStartIdx > oldEndIdx) {
+            before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
+            addVnodes(before, newCh, newStartIdx, newEndIdx);
+        } else if (newStartIdx > newEndIdx) {
+            removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+        }
+
+        this._children = {};
+        BI.each(newCh, function (i, child) {
+            var node = self._getOptions(child);
+            var key = node.key == null ? i : node.key;
+            self._children[self._getChildName(i)] = children[key];
+        });
+
+        function sameVnode(vnode1, vnode2, oldIndex, newIndex) {
+            vnode1 = self._getOptions(vnode1);
+            vnode2 = self._getOptions(vnode2);
+            if (BI.isKey(vnode1.key)) {
+                return vnode1.key === vnode2.key;
+            }
+            if (oldIndex >= 0) {
+                return oldIndex === newIndex
+            }
+        }
+
+        function addNode(vnode, index) {
+            var opt = self._getOptions(vnode);
+            var key = opt.key == null ? i : opt.key;
+            return children[key] = self._addElement(key, vnode);
+        }
+
+        function addVnodes(before, vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = addNode(vnodes[startIdx], startIdx);
+                insertBefore(node, before);
             }
         }
-        if (o.items.length > items.length) {
+
-            var deleted = [];
+        function removeVnodes(vnodes, startIdx, endIdx) {
-            for (i = items.length; i < o.items.length; i++) {
+            for (; startIdx <= endIdx; ++startIdx) {
-                deleted.push(this._children[this._getChildName(i)]);
+                var node = self._getOptions(vnodes[startIdx]);
-                delete this._children[this._getChildName(i)];
+                var key = node.key == null ? startIdx : node.key;
+                children[key]._destroy();
             }
-            o.items.splice(items.length);
+        }
-            BI.each(deleted, function (i, w) {
+
-                w._destroy();
+        function insertBefore(insert, before, isNext) {
-            })
+            insert = self._getOptions(insert);
-        } else if (items.length > o.items.length) {
+            before = before && self._getOptions(before);
-            for (i = o.items.length; i < items.length; i++) {
+            if (BI.isKey(insert.key)) {
-                this.addItemAt(i, items[i]);
+                if (before && children[before.key]) {
+                    var next;
+                    if (isNext) {
+                        next = children[before.key].element.next();
+                    } else {
+                        next = children[before.key].element;
+                    }
+                    if (next.length > 0) {
+                        next.before(children[insert.key].element);
+                    } else {
+                        self._getWrapper().append(children[insert.key].element);
+                    }
+                } else {
+                    self._getWrapper().append(children[insert.key].element);
+                }
+            } else {
+                throw "key is not defined";
             }
         }
+
         return updated;
     },
 
+    update: function (opt) {
+        var o = this.options;
+        var items = opt.items || [];
+        var updated = this.updateChildren(o.items, items);
+        this.options.items = items;
+        return updated;
+        // var updated, i, len;
+        // for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+        //     if (!this._compare(o.items[i], items[i])) {
+        //         updated = this.updateItemAt(i, items[i]) || updated;
+        //     }
+        // }
+        // if (o.items.length > items.length) {
+        //     var deleted = [];
+        //     for (i = items.length; i < o.items.length; i++) {
+        //         deleted.push(this._children[this._getChildName(i)]);
+        //         delete this._children[this._getChildName(i)];
+        //     }
+        //     o.items.splice(items.length);
+        //     BI.each(deleted, function (i, w) {
+        //         w._destroy();
+        //     })
+        // } else if (items.length > o.items.length) {
+        //     for (i = o.items.length; i < items.length; i++) {
+        //         this.addItemAt(i, items[i]);
+        //     }
+        // }
+        // return updated;
+    },
+
     stroke: function (items) {
         var self = this;
         BI.each(items, function (i, item) {

dist/core.js

@@ -14740,7 +14740,7 @@ BI.Widget = BI.inherit(BI.OB, {
     __d: function () {
         this.beforeDestroy && this.beforeDestroy();
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this._parent = null;
@@ -14763,7 +14763,7 @@ BI.Widget = BI.inherit(BI.OB, {
 
     empty: function () {
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this.element.empty();
@@ -19832,33 +19832,167 @@ BI.Layout = BI.inherit(BI.Widget, {
         })
     },
 
-    update: function (opt) {
+    patchItem: function (oldVnode, vnode, index) {
-        var o = this.options;
+        if (!this._compare(oldVnode, vnode)) {
-        var items = opt.items || [];
+            return this.updateItemAt(index, vnode);
-        var updated, i, len;
+        }
-        for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+    },
-            if (!this._compare(o.items[i], items[i])) {
+
-                updated = this.updateItemAt(i, items[i]) || updated;
+    updateChildren: function (oldCh, newCh) {
+        var self = this;
+        var oldStartIdx = 0, newStartIdx = 0;
+        var oldEndIdx = oldCh.length - 1;
+        var oldStartVnode = oldCh[0];
+        var oldEndVnode = oldCh[oldEndIdx];
+        var newEndIdx = newCh.length - 1;
+        var newStartVnode = newCh[0];
+        var newEndVnode = newCh[newEndIdx];
+        var oldKeyToIdx;
+        var idxInOld;
+        var elmToMove;
+        var before;
+        var updated;
+        var children = {};
+        BI.each(oldCh, function (i, child) {
+            child = self._getOptions(child);
+            var key = child.key == null ? i : child.key;
+            if (BI.isKey(key)) {
+                children[key] = self._children[self._getChildName(i)];
+            }
+        });
+
+        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+            if (BI.isNull(oldStartVnode)) {
+                oldStartVnode = oldCh[++oldStartIdx];
+            } else if (BI.isNull(oldEndVnode)) {
+                oldEndVnode = oldCh[--oldEndIdx];
+            } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) {
+                updated = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx) || updated;
+                oldStartVnode = oldCh[++oldStartIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) {
+                updated = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx) || updated;
+                oldEndVnode = oldCh[--oldEndIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldStartVnode, newEndVnode)) {
+                updated = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx) || updated;
+                insertBefore(oldStartVnode, oldEndVnode, true);
+                oldStartVnode = oldCh[++oldStartIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldEndVnode, newStartVnode)) {
+                updated = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx) || updated;
+                insertBefore(oldEndVnode, oldStartVnode);
+                oldEndVnode = oldCh[--oldEndIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else {
+                var node = addNode(newStartVnode);
+                insertBefore(node, oldStartVnode);
+                newStartVnode = newCh[++newStartIdx];
             }
         }
-        if (o.items.length > items.length) {
+        if (oldStartIdx > oldEndIdx) {
-            var deleted = [];
+            before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
-            for (i = items.length; i < o.items.length; i++) {
+            addVnodes(before, newCh, newStartIdx, newEndIdx);
-                deleted.push(this._children[this._getChildName(i)]);
+        } else if (newStartIdx > newEndIdx) {
-                delete this._children[this._getChildName(i)];
+            removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+        }
+
+        this._children = {};
+        BI.each(newCh, function (i, child) {
+            var node = self._getOptions(child);
+            var key = node.key == null ? i : node.key;
+            self._children[self._getChildName(i)] = children[key];
+        });
+
+        function sameVnode(vnode1, vnode2, oldIndex, newIndex) {
+            vnode1 = self._getOptions(vnode1);
+            vnode2 = self._getOptions(vnode2);
+            if (BI.isKey(vnode1.key)) {
+                return vnode1.key === vnode2.key;
             }
-            o.items.splice(items.length);
+            if (oldIndex >= 0) {
-            BI.each(deleted, function (i, w) {
+                return oldIndex === newIndex
-                w._destroy();
+            }
-            })
+        }
-        } else if (items.length > o.items.length) {
+
-            for (i = o.items.length; i < items.length; i++) {
+        function addNode(vnode, index) {
-                this.addItemAt(i, items[i]);
+            var opt = self._getOptions(vnode);
+            var key = opt.key == null ? i : opt.key;
+            return children[key] = self._addElement(key, vnode);
+        }
+
+        function addVnodes(before, vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = addNode(vnodes[startIdx], startIdx);
+                insertBefore(node, before);
             }
         }
+
+        function removeVnodes(vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = self._getOptions(vnodes[startIdx]);
+                var key = node.key == null ? startIdx : node.key;
+                children[key]._destroy();
+            }
+        }
+
+        function insertBefore(insert, before, isNext) {
+            insert = self._getOptions(insert);
+            before = before && self._getOptions(before);
+            if (BI.isKey(insert.key)) {
+                if (before && children[before.key]) {
+                    var next;
+                    if (isNext) {
+                        next = children[before.key].element.next();
+                    } else {
+                        next = children[before.key].element;
+                    }
+                    if (next.length > 0) {
+                        next.before(children[insert.key].element);
+                    } else {
+                        self._getWrapper().append(children[insert.key].element);
+                    }
+                } else {
+                    self._getWrapper().append(children[insert.key].element);
+                }
+            } else {
+                throw "key is not defined";
+            }
+        }
+
         return updated;
     },
 
+    update: function (opt) {
+        var o = this.options;
+        var items = opt.items || [];
+        var updated = this.updateChildren(o.items, items);
+        this.options.items = items;
+        return updated;
+        // var updated, i, len;
+        // for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+        //     if (!this._compare(o.items[i], items[i])) {
+        //         updated = this.updateItemAt(i, items[i]) || updated;
+        //     }
+        // }
+        // if (o.items.length > items.length) {
+        //     var deleted = [];
+        //     for (i = items.length; i < o.items.length; i++) {
+        //         deleted.push(this._children[this._getChildName(i)]);
+        //         delete this._children[this._getChildName(i)];
+        //     }
+        //     o.items.splice(items.length);
+        //     BI.each(deleted, function (i, w) {
+        //         w._destroy();
+        //     })
+        // } else if (items.length > o.items.length) {
+        //     for (i = o.items.length; i < items.length; i++) {
+        //         this.addItemAt(i, items[i]);
+        //     }
+        // }
+        // return updated;
+    },
+
     stroke: function (items) {
         var self = this;
         BI.each(items, function (i, item) {

dist/demo.js

@@ -6872,19 +6872,29 @@ BI.shortcut("demo.list_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
     },
 
     _createItems: function () {
-        var items = BI.makeArray(1000, {
+        var items = BI.map(BI.range(1000), function (i) {
-            type: "demo.virtual_group_item"
+            return {
+                type: "demo.virtual_group_item",
+                value: i,
+                key: i + 1
+            }
         });
-        items[0].value = BI.UUID();
         return items;
     },
 
     render: function () {
         var self = this;
+        var buttonGroupItems = self._createItems();
+        var virtualGroupItems = self._createItems();
         return {
             type: "bi.vertical",
             vgap: 20,
             items: [{
+                type: "bi.label",
+                cls: "layout-bg5",
+                height: 50,
+                text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出"
+            }, {
                 type: "bi.button_group",
                 width: 500,
                 height: 300,
@@ -6894,17 +6904,14 @@ BI.shortcut("demo.list_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
                 chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
                 layouts: [{
                     type: "bi.vertical"
-                }, {
-                    type: "bi.center_adapt",
                 }],
                 items: this._createItems()
             }, {
                 type: "bi.button",
                 text: "演示button_group的刷新",
                 handler: function () {
-                    var items = self._createItems();
+                    buttonGroupItems.shift();
-                    items.pop();
+                    self.buttonGroup.populate(BI.deepClone(buttonGroupItems));
-                    self.buttonGroup.populate(items);
                 }
             }, {
                 type: "bi.virtual_group",
@@ -6916,17 +6923,14 @@ BI.shortcut("demo.list_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
                 chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
                 layouts: [{
                     type: "bi.vertical"
-                }, {
-                    type: "bi.center_adapt",
                 }],
                 items: this._createItems()
             }, {
                 type: "bi.button",
                 text: "演示virtual_group的刷新",
                 handler: function () {
-                    var items = self._createItems();
+                    virtualGroupItems.shift();
-                    items.pop();
+                    self.virtualGroup.populate(BI.deepClone(virtualGroupItems));
-                    self.virtualGroup.populate(items);
                 }
             }]
 
@@ -6942,14 +6946,14 @@ Demo.Item = BI.inherit(BI.Widget, {
     },
 
     render: function () {
-        var self = this;
+        var self = this, o = this.options;
         return {
             type: "bi.label",
             ref: function () {
                 self.label = this;
             },
             height: this.options.height,
-            text: "这是一个测试项" + BI.UUID()
+            text: "key:" + o.key + ",随机数" + BI.UUID()
         }
     },
 

dist/sliders.js

@@ -1862,7 +1862,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
         this.blueTrack = BI.createWidget({
             type: "bi.layout",
-            cls: "blue-track",
+            cls: "blue-track bi-high-light-background",
             height: 6
         });
         if (this.options.color) {

src/addons/sliders/js/singleslider/singleslider.normal.js

@@ -118,7 +118,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         });
         this.blueTrack = BI.createWidget({
             type: "bi.layout",
-            cls: "blue-track",
+            cls: "blue-track bi-high-light-background",
             height: 6
         });
         if (this.options.color) {

src/core/widget.js

@@ -407,7 +407,7 @@ BI.Widget = BI.inherit(BI.OB, {
     __d: function () {
         this.beforeDestroy && this.beforeDestroy();
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this._parent = null;
@@ -430,7 +430,7 @@ BI.Widget = BI.inherit(BI.OB, {
 
     empty: function () {
         BI.each(this._children, function (i, widget) {
-            widget._unMount && widget._unMount();
+            widget && widget._unMount && widget._unMount();
         });
         this._children = {};
         this.element.empty();

src/core/wrapper/layout.js

@@ -347,31 +347,165 @@ BI.Layout = BI.inherit(BI.Widget, {
         })
     },
 
-    update: function (opt) {
+    patchItem: function (oldVnode, vnode, index) {
-        var o = this.options;
+        if (!this._compare(oldVnode, vnode)) {
-        var items = opt.items || [];
+            return this.updateItemAt(index, vnode);
-        var updated, i, len;
+        }
-        for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+    },
-            if (!this._compare(o.items[i], items[i])) {
+
-                updated = this.updateItemAt(i, items[i]) || updated;
+    updateChildren: function (oldCh, newCh) {
+        var self = this;
+        var oldStartIdx = 0, newStartIdx = 0;
+        var oldEndIdx = oldCh.length - 1;
+        var oldStartVnode = oldCh[0];
+        var oldEndVnode = oldCh[oldEndIdx];
+        var newEndIdx = newCh.length - 1;
+        var newStartVnode = newCh[0];
+        var newEndVnode = newCh[newEndIdx];
+        var oldKeyToIdx;
+        var idxInOld;
+        var elmToMove;
+        var before;
+        var updated;
+        var children = {};
+        BI.each(oldCh, function (i, child) {
+            child = self._getOptions(child);
+            var key = child.key == null ? i : child.key;
+            if (BI.isKey(key)) {
+                children[key] = self._children[self._getChildName(i)];
+            }
+        });
+
+        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+            if (BI.isNull(oldStartVnode)) {
+                oldStartVnode = oldCh[++oldStartIdx];
+            } else if (BI.isNull(oldEndVnode)) {
+                oldEndVnode = oldCh[--oldEndIdx];
+            } else if (sameVnode(oldStartVnode, newStartVnode, oldStartIdx, newStartIdx)) {
+                updated = this.patchItem(oldStartVnode, newStartVnode, oldStartIdx) || updated;
+                oldStartVnode = oldCh[++oldStartIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else if (sameVnode(oldEndVnode, newEndVnode, oldEndIdx, newEndIdx)) {
+                updated = this.patchItem(oldEndVnode, newEndVnode, oldEndIdx) || updated;
+                oldEndVnode = oldCh[--oldEndIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldStartVnode, newEndVnode)) {
+                updated = this.patchItem(oldStartVnode, newEndVnode, oldStartIdx) || updated;
+                insertBefore(oldStartVnode, oldEndVnode, true);
+                oldStartVnode = oldCh[++oldStartIdx];
+                newEndVnode = newCh[--newEndIdx];
+            } else if (sameVnode(oldEndVnode, newStartVnode)) {
+                updated = this.patchItem(oldEndVnode, newStartVnode, oldEndIdx) || updated;
+                insertBefore(oldEndVnode, oldStartVnode);
+                oldEndVnode = oldCh[--oldEndIdx];
+                newStartVnode = newCh[++newStartIdx];
+            } else {
+                var node = addNode(newStartVnode);
+                insertBefore(node, oldStartVnode);
+                newStartVnode = newCh[++newStartIdx];
             }
         }
-        if (o.items.length > items.length) {
+        if (oldStartIdx > oldEndIdx) {
-            var deleted = [];
+            before = BI.isNull(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
-            for (i = items.length; i < o.items.length; i++) {
+            addVnodes(before, newCh, newStartIdx, newEndIdx);
-                deleted.push(this._children[this._getChildName(i)]);
+        } else if (newStartIdx > newEndIdx) {
-                delete this._children[this._getChildName(i)];
+            removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+        }
+
+        this._children = {};
+        BI.each(newCh, function (i, child) {
+            var node = self._getOptions(child);
+            var key = node.key == null ? i : node.key;
+            self._children[self._getChildName(i)] = children[key];
+        });
+
+        function sameVnode(vnode1, vnode2, oldIndex, newIndex) {
+            vnode1 = self._getOptions(vnode1);
+            vnode2 = self._getOptions(vnode2);
+            if (BI.isKey(vnode1.key)) {
+                return vnode1.key === vnode2.key;
             }
-            o.items.splice(items.length);
+            if (oldIndex >= 0) {
-            BI.each(deleted, function (i, w) {
+                return oldIndex === newIndex
-                w._destroy();
+            }
-            })
+        }
-        } else if (items.length > o.items.length) {
+
-            for (i = o.items.length; i < items.length; i++) {
+        function addNode(vnode, index) {
-                this.addItemAt(i, items[i]);
+            var opt = self._getOptions(vnode);
+            var key = opt.key == null ? i : opt.key;
+            return children[key] = self._addElement(key, vnode);
+        }
+
+        function addVnodes(before, vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = addNode(vnodes[startIdx], startIdx);
+                insertBefore(node, before);
+            }
+        }
+
+        function removeVnodes(vnodes, startIdx, endIdx) {
+            for (; startIdx <= endIdx; ++startIdx) {
+                var node = self._getOptions(vnodes[startIdx]);
+                var key = node.key == null ? startIdx : node.key;
+                children[key]._destroy();
+            }
+        }
+
+        function insertBefore(insert, before, isNext) {
+            insert = self._getOptions(insert);
+            before = before && self._getOptions(before);
+            if (BI.isKey(insert.key)) {
+                if (before && children[before.key]) {
+                    var next;
+                    if (isNext) {
+                        next = children[before.key].element.next();
+                    } else {
+                        next = children[before.key].element;
+                    }
+                    if (next.length > 0) {
+                        next.before(children[insert.key].element);
+                    } else {
+                        self._getWrapper().append(children[insert.key].element);
+                    }
+                } else {
+                    self._getWrapper().append(children[insert.key].element);
+                }
+            } else {
+                throw "key is not defined";
             }
         }
+
+        return updated;
+    },
+
+    update: function (opt) {
+        var o = this.options;
+        var items = opt.items || [];
+        var updated = this.updateChildren(o.items, items);
+        this.options.items = items;
         return updated;
+        // var updated, i, len;
+        // for (i = 0, len = Math.min(o.items.length, items.length); i < len; i++) {
+        //     if (!this._compare(o.items[i], items[i])) {
+        //         updated = this.updateItemAt(i, items[i]) || updated;
+        //     }
+        // }
+        // if (o.items.length > items.length) {
+        //     var deleted = [];
+        //     for (i = items.length; i < o.items.length; i++) {
+        //         deleted.push(this._children[this._getChildName(i)]);
+        //         delete this._children[this._getChildName(i)];
+        //     }
+        //     o.items.splice(items.length);
+        //     BI.each(deleted, function (i, w) {
+        //         w._destroy();
+        //     })
+        // } else if (items.length > o.items.length) {
+        //     for (i = o.items.length; i < items.length; i++) {
+        //         this.addItemAt(i, items[i]);
+        //     }
+        // }
+        // return updated;
     },
 
     stroke: function (items) {