Comments (5)
Hey @shannonmoeller, the recommended solution is to assign an id
attribute with a unique value for each <video>
element and morphdom
will match the elements up by the assigned ID.
If you don't like assigning an "id" attribute then you can provide your own getNodeKey(el)
function:
var morphedNode = morphdom(fromNode, toNode, {
getNodeKey: function(el) {
return el.id;
},
...
});
Let me know if that doesn't solve your problem.
from morphdom.
This doesn't fully solve the issue. When an item is removed from the list, the other elements remain, so we're half way there. However, if an element is moved down the list, it's still getting overridden by the new element, even with the same id
.
from morphdom.
I'm thinking this could be used for a quick comparison:
https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode
from morphdom.
Oh, awesome. I wasn't aware of that. Thanks!
from morphdom.
It sounds like range.insertNode
(or insertBefore
) would do the trick. Instead of morphing, you would need to move the existing node to the new location in the DOM. @patrick-steele-idem does this sound correct?
from morphdom.
Related Issues (20)
- onBeforeAttribute Removed/Added/Changed hooks ? HOT 3
- resized textarea gets treated as new element HOT 1
- Consider adding to js-framework-benchmark
- onBeforeNodeUpdated?
- Loosing DOM state when prepending element HOT 5
- IHP seems to be using morphdom HOT 1
- OnBeforeElUpdated - How to alter the "to" value HOT 1
- Duplicate ID issue HOT 1
- Unnecessary if condition
- skip diffing a node, but then continue diffing its children?
- Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'toNodeAttrs.length')
- Replacing multiple independent DOM items
- examples don't work in macOS Chrome or Safari
- Input type change breaks value change
- onAfterChanges option (or something similar) HOT 7
- Allow to provide custom morphAttrs function
- Morphing page with a lot (1000 or so) FORM tags is slow
- Leverage the DocumentFragment API?
- Cannot read properties of null (reading 'nodeName')
- Is this project discontinued? HOT 1
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 morphdom.