Browse Source

支持自动watch

es6
guy 3 years ago
parent
commit
411d3d2b59
  1. 32
      examples/dev.html
  2. 73
      examples/resize.html
  3. 8
      src/core/4.widget.js
  4. 10
      src/core/wrapper/layout.js

32
examples/dev.html

@ -12,7 +12,7 @@
var Model = BI.inherit(Fix.Model, { var Model = BI.inherit(Fix.Model, {
state: function () { state: function () {
return { return {
count: 0 columnSize: [200, "fill"]
}; };
} }
}); });
@ -20,6 +20,10 @@
BI.model("demo.model", Model); BI.model("demo.model", Model);
var Widget = BI.inherit(BI.Widget, { var Widget = BI.inherit(BI.Widget, {
props: {
height: 200,
width: 600
},
_store: function () { _store: function () {
return BI.Models.getModel("demo.model"); return BI.Models.getModel("demo.model");
}, },
@ -27,15 +31,27 @@
var store = BI.useStore(); var store = BI.useStore();
return function () { return function () {
return { return {
type: "bi.vertical", type: "bi.htape",
columnSize: function () {
return store.model.columnSize;
},
items: [{ 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"]
}
}]
}] }]
}; };
}; };

73
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>

8
src/core/4.widget.js

@ -163,7 +163,7 @@
} }
if (o.cls) { if (o.cls) {
if (BI.isFunction(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); self.element.removeClass(cls).addClass(cls = newValue);
}); });
this.element.addClass(cls); this.element.addClass(cls);
@ -182,7 +182,7 @@
} }
if (o.css) { if (o.css) {
if (BI.isFunction(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) { for (var k in css) {
if (!newValue[k]) { if (!newValue[k]) {
newValue[k] = ""; newValue[k] = "";
@ -205,8 +205,8 @@
this._watchers = this._watchers || []; this._watchers = this._watchers || [];
var watcher = new Fix.Watcher(null, function () { var watcher = new Fix.Watcher(null, function () {
return getter.call(self, self); return getter.call(self, self);
}, (handler && function () { }, (handler && function (v) {
handler.call(self, self); handler.call(self, self, v);
}) || BI.emptyFn, options); }) || BI.emptyFn, options);
this._watchers.push(watcher); this._watchers.push(watcher);
return watcher.value; return watcher.value;

10
src/core/wrapper/layout.js

@ -19,8 +19,18 @@ BI.Layout = BI.inherit(BI.Widget, {
}, },
render: function () { render: function () {
var self = this, o = this.options;
this._init4Margin(); this._init4Margin();
this._init4Scroll(); 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 () { _init4Margin: function () {

Loading…
Cancel
Save