Skip to content

Instantly share code, notes, and snippets.

@jlgrall jlgrall/test.js
Last active Dec 12, 2018

Embed
What would you like to do?
domvm test case: unnecessarily redrawing child vm when parent vm is also redrawing
var el = domvm.defineElement,
vw = domvm.defineView;
// State:
var color = "purple",
numbers = [{nb: 0}, {nb: 1}, {nb: 2}, {nb: 3}, {nb: 4}, {nb: 5}];
// Views:
function ListView() {
return function(vm) {
var items = [];
for (var i = 0; i < numbers.length; i++) items.push(vw(ItemView, {i: i}));
return el("ol", items);
};
}
function ItemView() {
return function(vm, data) {
return el("li", {style: "color:" + color}, "Item " + numbers[data.i].nb);
};
}
var listView = domvm.createView(ListView).mount(document.body);
// Redraw functions:
function redrawItems() {
for (var el of document.querySelectorAll("li")) el._node.vm.redraw();
}
function redrawList() {
document.querySelector("ol")._node.vm.redraw();
}
// Test:
setTimeout(function() {
console.log("ACTION: length = 2, then color = olive...");
numbers.length = 2;
redrawList(); // Will removes children vm.
// ... other computations ...
color = "olive";
redrawItems(); // Children vm will be redrawn even after being removed.
// Thus an error will be thrown during redrawing.
}, 1000);
setTimeout(function() {
console.log("RESET: initial state...");
color = "purple";
numbers = [{nb: 0}, {nb: 1}, {nb: 2}, {nb: 3}, {nb: 4}, {nb: 5}];
redrawList();
}, 2000);
setTimeout(function() {
console.log("ACTION (reversed order): color = olive, then length = 2...");
color = "olive";
redrawItems(); // Children vm will be redrawn even after being removed.
// ... other computations ...
numbers.length = 2;
redrawList(); // Will removes children vm.
// Thus an error will be thrown during redrawing.
}, 3000);
@jlgrall

This comment has been minimized.

Copy link
Owner Author

commented Dec 12, 2018

Related domvm issue: domvm/domvm#206

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.