Browse Source

增加updateModel属性,可以配置自动模式,自动watch属性并响应变化

es6
guy 4 years ago
parent
commit
5fb75ef130
  1. 3
      changelog.md
  2. 103
      dev.html
  3. 73
      dist/fix/fix.compact.js
  4. 6
      src/base/single/button/buttons/button.js
  5. 11
      src/base/single/single.js
  6. 7
      src/core/ob.js
  7. 21
      src/core/widget.js
  8. 14
      src/core/wrapper/layout.js

3
changelog.md

@ -1,4 +1,7 @@
# 更新日志
2.0(2021-02)
- 增加updateModel属性,可以配置自动模式,自动watch属性并响应变化
2.0(2021-01)
- 修改了日期下拉面板中的当前时间按钮的交互效果
- 新增年区间和年季度区间控件

103
dev.html

@ -0,0 +1,103 @@
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
<script src="http://localhost:9001/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
var Model = BI.inherit(Fix.Model, {
state: function () {
return {
expand: false
};
},
childContext: ["text"],
computed: {
text: function () {
return this.model.expand ? "text-yes" : "text-not";
}
},
actions: {
toggle: function () {
this.model.expand = !this.model.expand;
}
}
});
BI.model("demo.model", Model);
var ChildModel = BI.inherit(Fix.Model, {
context: ["text"]
});
BI.model("demo.child_model", ChildModel);
var Child = BI.inherit(BI.Widget, {
props: {
updateMode: "auto"
},
setup: function () {
var store = BI.useStore(function () {
return BI.Models.getModel("demo.child_model");
});
return {
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.button",
text: store.model.text
}, {
type: "bi.label",
text: store.model.text
}]
};
}
};
}
});
BI.shortcut("demo.child", Child);
var Widget = BI.inherit(BI.Widget, {
props: {
updateMode: "auto"
},
setup: function () {
var store = BI.useStore(function () {
return BI.Models.getModel("demo.model");
});
setInterval(function () {
store.toggle();
}, 1000);
return function () {
return {
type: "bi.vertical",
vgap: 20,
items: [{
type: "demo.child"
}, {
type: "demo.child"
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>

73
dist/fix/fix.compact.js vendored

@ -183,6 +183,79 @@
needPop && popTarget();
};
BI.Widget.prototype._initElement = function () {
var self = this;
var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
var els;
if (this.options.updateMode === "auto") {
// 自动更新模式
var childComponents = {};
var rendered = false;
initWatch(this, {});
this._watchers.push(Fix.watch(this.model, function () {
if (rendered) {
var newEls = render && render.call(this);
BI.each(childComponents, function (i, childComponent) {
var nextProps = BI.get([newEls], childComponent.path);
if (nextProps) {
var shouldUpdate;
if (shouldUpdate = (childComponent.component.shouldUpdate && childComponent.component.shouldUpdate(nextProps))) {
childComponent.component._update(shouldUpdate === true ? nextProps : shouldUpdate);
} else {
childComponent.component._update(nextProps);
}
childComponent.props = BI.extend(childComponent.props, nextProps);
}
});
} else {
els = render && render.call(this);
function traverse (parent, path) {
BI.each(parent, function (i, child) {
const childPath = path.concat(i);
if (BI.isArray(child)) {
traverse(child, childPath);
} else if (BI.isPlainObject(child)) {
if (child.type) {
child.__ref = function (_ref) {
if (_ref) {
var comp = childComponents[this.getName()] = {};
comp.component = _ref;
comp.props = child;
comp.path = childPath;
} else {
delete childComponents[this.getName()];
}
};
}
traverse(child, childPath);
}
});
}
traverse([els], []);
rendered = true;
}
}));
} else {
els = render && render.call(this);
}
if (BI.isPlainObject(els)) {
els = [els];
}
if (BI.isArray(els)) {
BI.each(els, function (i, el) {
if (el) {
BI._lazyCreateWidget(el, {
element: self
});
}
});
}
// if (this._isRoot === true || !(this instanceof BI.Layout)) {
this._mount();
};
var unMount = BI.Widget.prototype.__d;
BI.Widget.prototype.__d = function () {
try {

6
src/base/single/button/buttons/button.js

@ -1,4 +1,3 @@
/**
* 文字类型的按钮
* @class BI.Button
@ -44,7 +43,10 @@ BI.Button = BI.inherit(BI.BasicButton, {
BI.Button.superclass._init.apply(this, arguments);
var o = this.options, self = this;
if (BI.isNumber(o.height) && !o.clear && !o.block) {
this.element.css({height: o.height / BI.pixRatio + BI.pixUnit, lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit});
this.element.css({
height: o.height / BI.pixRatio + BI.pixUnit,
lineHeight: (o.height - 2) / BI.pixRatio + BI.pixUnit
});
} else if (o.clear || o.block) {
this.element.css({lineHeight: o.height / BI.pixRatio + BI.pixUnit});
} else {

11
src/base/single/single.js

@ -199,11 +199,20 @@ BI.Single = BI.inherit(BI.Widget, {
return this.options.value;
},
update: function (props) {
if ("value" in props) {
this.setValue(props.value);
}
if ("text" in props) {
this.setText(props.text);
}
},
destroyed: function () {
if (BI.isNotNull(this.showTimeout)) {
clearTimeout(this.showTimeout);
this.showTimeout = null;
}
BI.Tooltips.remove(this.getName());
},
}
});

7
src/core/ob.js

@ -72,6 +72,9 @@
// 获得一个当前对象的引用
_initRef: function () {
if (this.options.__ref) {
this.options.__ref.call(this, this);
}
if (this.options.ref) {
this.options.ref.call(this, this);
}
@ -79,6 +82,10 @@
//释放当前对象
_purgeRef: function () {
if (this.options.__ref) {
this.options.__ref.call(null);
this.options.__ref = null;
}
if (this.options.ref) {
this.options.ref.call(null);
this.options.ref = null;

21
src/core/widget.js

@ -32,7 +32,8 @@
baseCls: "",
extraCls: "",
cls: "",
css: null
css: null,
updateMode: "manual" // manual / auto
});
},
@ -76,6 +77,10 @@
update: function () {
},
beforeUpdate: null,
updated: null,
beforeDestroy: null,
destroyed: null,
@ -243,6 +248,20 @@
_mountChildren: null,
_update: function (nextProps) {
var o = this.options;
callLifeHook(this, "beforeUpdate");
var nextChange = {};
BI.each(nextProps, function (key, value) {
if (o[key] !== value) {
nextChange[key] = value;
}
});
var res = BI.isNotEmptyObject(nextChange) && this.update(nextChange);
callLifeHook(this, "updated");
return res;
},
isMounted: function () {
return this._isMounted;
},

14
src/core/wrapper/layout.js

@ -268,19 +268,13 @@ BI.Layout = BI.inherit(BI.Widget, {
if (!child.shouldUpdate) {
return null;
}
return child.shouldUpdate(this._getOptions(item)) === true;
return child.shouldUpdate(this._getOptions(item)) !== false;
},
updateItemAt: function (index, item) {
if (index < 0 || index > this.options.items.length - 1) {
return;
}
var child = this._children[this._getChildName(index)];
var updated;
if (updated = child.update(this._getOptions(item))) {
return updated;
}
var del = this._children[this._getChildName(index)];
delete this._children[this._getChildName(index)];
this.options.items.splice(index, 1);
@ -367,7 +361,11 @@ BI.Layout = BI.inherit(BI.Widget, {
patchItem: function (oldVnode, vnode, index) {
var shouldUpdate = this.shouldUpdateItem(index, vnode);
if (shouldUpdate === true || (shouldUpdate === null && !this._compare(oldVnode, vnode))) {
if (shouldUpdate) {
var child = this._children[this._getChildName(index)];
return child._update(shouldUpdate === true ? this._getOptions(vnode) : shouldUpdate);
}
if (shouldUpdate === null && !this._compare(oldVnode, vnode)) {
return this.updateItemAt(index, vnode);
}
},

Loading…
Cancel
Save