Browse Source

Pull request #2106: 无JIRA任务 解决index和key的冲突问题

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit 'a3414cfba9c817e19c840aba7ad0ca25b7636cbf':
  整理代码
  整理代码
  整理代码
es6
guy 3 years ago
parent
commit
c1dfb66d59
  1. 119
      examples/dev.html
  2. 142
      examples/插件设计.html
  3. 33
      src/core/wrapper/layout.js
  4. 2
      template/index.html

119
examples/dev.html

@ -9,85 +9,6 @@
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>
<script> <script>
BI.config("demo.parent", function (config){
console.log("123");
return config;
}, {
version: "1.0"
});
BI.module("my.module", {
// version不设置的话默认就用接口的version作为判断条件
version: "1.0",
components: {
"demo.parent": "1.0"
}
})
// 主线代码里加这个
BI.config("bi.provider.system", function (provider) {
provider.addDependencies({
"my.module": {
minVersion: "2.0",
maxVersion: "4.0"
}
})
})
</script>
<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, {
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,
handler: function () {
console.log("click");
}
}, {
type: "bi.label",
text: store.model.text
}]
};
}
};
}
});
BI.shortcut("demo.child", Child);
var Widget = BI.inherit(BI.Widget, { var Widget = BI.inherit(BI.Widget, {
props: { props: {
@ -99,27 +20,35 @@
} }
}, },
setup: function () { setup: function () {
var child; var layout;
var store = BI.useStore(function () {
return BI.Models.getModel("demo.model");
});
setInterval(function () {
store.toggle();
}, 1000);
// BI.watch("text", function () {
// child.reset();
// });
return function () { return function () {
return { return {
type: "bi.vertical", type: "bi.left",
vgap: store.model.expand ? 20 : 30,
items: [{ items: [{
type: "demo.child", type: "bi.button",
ref: function (_ref) { text: "点击",
child = _ref; handler: function () {
layout.populate([{
type: "bi.label",
key: "1",
text: 1
}, {
type: "bi.label",
key: "2",
text: 2
}])
} }
}, { }, {
type: "demo.child" type: "bi.left",
lgap: 10,
items: [{
type: "bi.label",
key: "123",
text: "start"
}],
ref: function (_ref) {
layout = _ref;
}
}] }]
}; };
}; };

142
examples/插件设计.html

@ -0,0 +1,142 @@
<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>-->
<script src="http://localhost:9001/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
BI.config("demo.parent", function (config){
console.log("123");
return config;
}, {
version: "1.0"
});
BI.module("my.module", {
// version不设置的话默认就用接口的version作为判断条件
version: "1.0",
components: {
"demo.parent": "1.0"
}
})
// 主线代码里加这个
BI.config("bi.provider.system", function (provider) {
provider.addDependencies({
"my.module": {
minVersion: "2.0",
maxVersion: "4.0"
}
})
})
</script>
<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, {
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,
handler: function () {
console.log("click");
}
}, {
type: "bi.label",
text: store.model.text
}]
};
}
};
}
});
BI.shortcut("demo.child", Child);
var Widget = BI.inherit(BI.Widget, {
props: {
vdom: true
},
watch: {
text: function () {
this.reset();
}
},
setup: function () {
var child;
var store = BI.useStore(function () {
return BI.Models.getModel("demo.model");
});
setInterval(function () {
store.toggle();
}, 1000);
// BI.watch("text", function () {
// child.reset();
// });
return function () {
return {
type: "bi.vertical",
vgap: store.model.expand ? 20 : 30,
items: [{
type: "demo.child",
ref: function (_ref) {
child = _ref;
}
}, {
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>

33
src/core/wrapper/layout.js

@ -440,21 +440,21 @@ BI.Layout = BI.inherit(BI.Widget, {
newStartVnode = newCh[++newStartIdx]; newStartVnode = newCh[++newStartIdx];
} else { } else {
var sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx); var sameOldVnode = findOldVnode(oldCh, newStartVnode, oldStartIdx, oldEndIdx);
if (BI.isNull(sameOldVnode)) { // 不存在就把新的放到左边 if (BI.isNull(sameOldVnode[0])) { // 不存在就把新的放到左边
delete self._children[self._getChildName(newStartIdx)];
var node = addNode(newStartVnode, newStartIdx); var node = addNode(newStartVnode, newStartIdx);
insertBefore(node, oldStartVnode); insertBefore(node, oldStartVnode);
newStartVnode = newCh[++newStartIdx]; } else { // 如果新节点在旧节点区间中存在就复用一下
} else { // 如果新节点在就旧节点区间中存在就复用一下 var sameOldIndex = sameOldVnode[1];
BI.each(oldCh, function (index, child) { updated = self.patchItem(sameOldVnode[0], newStartVnode, sameOldIndex, newStartIdx) || updated;
if (child && sameVnode(child, newStartVnode)) { children[sameOldVnode[0].key == null ? newStartIdx : sameOldVnode[0].key] = self._children[self._getChildName(newStartIdx)] = self._children[self._getChildName(sameOldIndex)];
updated = self.patchItem(sameOldVnode, newStartVnode, index, index) || updated; if (newStartIdx !== sameOldIndex) {
children[sameOldVnode.key == null ? index : sameOldVnode.key] = self._children[self._getChildName(index)]; delete self._children[self._getChildName(sameOldIndex)];
oldCh[index] = undefined; }
insertBefore(sameOldVnode, oldStartVnode); oldCh[sameOldIndex] = undefined;
} insertBefore(sameOldVnode[0], oldStartVnode);
});
newStartVnode = newCh[++newStartIdx];
} }
newStartVnode = newCh[++newStartIdx];
} }
} }
if (oldStartIdx > oldEndIdx) { if (oldStartIdx > oldEndIdx) {
@ -486,7 +486,7 @@ BI.Layout = BI.inherit(BI.Widget, {
function addNode (vnode, index) { function addNode (vnode, index) {
var opt = self._getOptions(vnode); var opt = self._getOptions(vnode);
var key = opt.key == null ? index : opt.key; var key = opt.key == null ? index : opt.key;
return children[key] = self._addElement(key, vnode); return children[key] = self._addElement(index, vnode);
} }
function addVnodes (before, vnodes, startIdx, endIdx) { function addVnodes (before, vnodes, startIdx, endIdx) {
@ -502,7 +502,7 @@ BI.Layout = BI.inherit(BI.Widget, {
if (BI.isNotNull(ch)) { if (BI.isNotNull(ch)) {
var node = self._getOptions(ch); var node = self._getOptions(ch);
var key = node.key == null ? startIdx : node.key; var key = node.key == null ? startIdx : node.key;
delete self._children[self._getChildName(key)]; delete self._children[self._getChildName(startIdx)];
children[key]._destroy(); children[key]._destroy();
} }
} }
@ -531,13 +531,14 @@ BI.Layout = BI.inherit(BI.Widget, {
} }
function findOldVnode (vnodes, vNode, beginIdx, endIdx) { function findOldVnode (vnodes, vNode, beginIdx, endIdx) {
var i, found; var i, found, findIndex;
for (i = beginIdx; i <= endIdx; ++i) { for (i = beginIdx; i <= endIdx; ++i) {
if (vnodes[i] && sameVnode(vnodes[i], vNode)) { if (vnodes[i] && sameVnode(vnodes[i], vNode)) {
found = vnodes[i]; found = vnodes[i];
findIndex = i;
} }
} }
return found; return [found, findIndex];
} }
return updated; return updated;

2
template/index.html

@ -10,6 +10,8 @@
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>
</body> </body>
<script src="../dist/router.js"></script>
</html> </html>

Loading…
Cancel
Save