feature： items支持响应式

src/core/h.js

@@ -39,11 +39,18 @@ BI.h = function (type, props, children) {
             right: children
         }, props);
     }
-    if (children.length === 1 && BI.isKey(children[0])) {
+    if (children.length === 1) {
+        if (BI.isKey(children[0])) {
             return BI.extend({
                 type: type
             }, { text: children[0] }, props);
         }
+        if (BI.isFunction(children[0])) {
+            return BI.extend({
+                type: type
+            }, { text: children[0], items: children[0] }, props);
+        }
+    }
 
     return BI.extend({
         type: type

src/core/wrapper/layout/adapt/absolute.center.js

@@ -18,7 +18,11 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/adapt/adapt.table.js

@@ -19,8 +19,8 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        var o = this.options;
         BI.TableAdaptLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
@@ -28,7 +28,10 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
             height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
             "white-space": "nowrap"
         });
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/adapt/auto.horizontal.js

@@ -18,7 +18,11 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.HorizontalAutoLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/fill/float.fill.horizontal.js

@@ -16,7 +16,11 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/flex/flex.horizontal.js

@@ -23,7 +23,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
@@ -31,7 +31,10 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/flex/flex.vertical.js

@@ -22,7 +22,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
@@ -30,7 +30,10 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@@ -24,10 +24,13 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@@ -24,10 +24,13 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {

src/core/wrapper/layout/float/float.absolute.center.js

@@ -12,7 +12,11 @@ BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.absolute.js

@@ -17,7 +17,11 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.AbsoluteLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.adaptive.js

@@ -12,7 +12,11 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.AdaptiveLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.border.js

@@ -13,7 +13,11 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.BorderLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/layout.card.js

@@ -16,7 +16,11 @@ BI.CardLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.CardLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     stroke: function (items) {

src/core/wrapper/layout/layout.default.js

@@ -18,7 +18,11 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.DefaultLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.division.js

@@ -15,7 +15,11 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.DivisionLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/layout.flow.js

@@ -21,7 +21,7 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatLeftLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
@@ -34,7 +34,10 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
                 paddingBottom: this._optimiseGap(o.innerVgap)
             })
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
@@ -110,8 +113,23 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatRightLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        if (o.innerHgap !== 0) {
+            this.element.css({
+                paddingLeft: this._optimiseGap(o.innerHgap),
+                paddingRight: this._optimiseGap(o.innerHgap)
+            })
+        }
+        if (o.innerVgap !== 0) {
+            this.element.css({
+                paddingTop: this._optimiseGap(o.innerVgap),
+                paddingBottom: this._optimiseGap(o.innerVgap)
+            })
+        }
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.grid.js

@@ -15,7 +15,11 @@ BI.GridLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.GridLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function () {

src/core/wrapper/layout/layout.inline.js

@@ -27,11 +27,14 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.InlineLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             textAlign: o.horizontalAlign
         });
-        this.populate(o.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.lattice.js

@@ -16,7 +16,11 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.LatticeLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.table.js

@@ -19,7 +19,11 @@ BI.TableLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.TableLayout.superclass.render.apply(this, arguments);
         this.rows = 0;
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (idx, arr) {

src/core/wrapper/layout/layout.tape.js

@@ -20,7 +20,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HTapeLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {

src/core/wrapper/layout/layout.td.js

@@ -32,7 +32,10 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             "border-collapse": "separate"
         });
         this.rows = 0;
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (idx, arr) {

src/core/wrapper/layout/layout.vertical.js

@@ -19,7 +19,11 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.VerticalLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {

src/core/wrapper/layout/layout.window.js

@@ -22,7 +22,11 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.WindowLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {