Comments (8)
You're probably correct. I've seen bugs like this from time to time and try to clean up the code in hopes it fixes them. The code is relatively simple (compared to something like react). If you have time, could you look at the logic and see where the issue is? If not, I'll try to find time later.
from domchanger.
Another issue is that Sporting Goods
and Electronics
groups swap places if you filter to keep items in only a single group and then remove the filter. This is probably due to existing node retention, but shouldn't happen in the trivial case when the original data structure is not being re-sorted.
I'm not sure I'll have time to look into this as there seem to be a multitude of diffing issues here. It may be worth growing the lib size even by 2x to get a more robust diffing strategy in place. "Everything should be made as simple as possible, but no simpler."
Overall, I like the straightforwardness/encapsulation of the framework though 👍
from domchanger.
Agreed that simplicity is nothing if the result is wrong. But I don't think correct behavior will require much complexity added, just needs some time and attention and lots of testing.
from domchanger.
Well if you get a chance to look into it, it'd be cool. If for no other reason than to make your own example work :)
from domchanger.
elegant in its brevity. big thanks.
nothing says "try this new framework" like "try to debug the broken example" :)
i'm gonna give this thing a whirl and if i run into issues, will try to fix and pull req or open an issue otherwise.
from domchanger.
Awesome. This fix seemed to fix the two things you reported. Let me know if you run into any more issues, the code is short, but dense.
from domchanger.
I actually did run into another issue but not sure if it's in the core or the example code yet. First i changed the Search filter to onkeyup
, like in the fiddle and the js file (cause it's still onchange
in test.html).
Filtering works as expected, except after the filter is emptied and you press e.g. backspace within the input. at that point products switch categories.
Reduced steps to reproduce after switching to onkeyup
:
var data = [
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
- Type
x
in the filter input (ok) - Press
backspace
to delete (ok) - Press
backspace
again (iPod Touch moves up to wrong category)
The items that "jump" are always all the ones that were excluded by the filter.
Not sure yet if it's a grouping issue in the example or a diff problem but judging by the behavior it's probably the diff?
UPDATE: if more categories are added, all items that were excluded by the filter always move up to first category.
try same steps with:
var data = [
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: true, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'},
{category: 'Other', price: '$99.99', stocked: true, name: 'iFoo Touch'},
{category: 'Other', price: '$399.99', stocked: true, name: 'xBear 5'},
{category: 'Other', price: '$199.99', stocked: true, name: 'cows 7'}
];
from domchanger.
Good find, this one is a little more involved, I'll see if I can find the bug in the algorithm. It appears as if, when there are no changes to make, it does half the algorithm, but skips the part where it re-orders inserts (to preserve order). Ideally it will do nothing in this case.
from domchanger.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from domchanger.