Giter Club home page Giter Club logo

Comments (2)

themindfuldev avatar themindfuldev commented on August 27, 2024

Very well @trystian1 - as far as options, what would be interesting to be passed here? would it be like custom getVNodeKey functions?

from marionette-vdom.

trystian1 avatar trystian1 commented on August 27, 2024

Hmm since attachElContent is called from Marionette it is not possible to add options.
I'll quickly explain the problem I ran into.

At our project we use dust template helpers to define our templates. So we add/remove things from the DOM on basis of properties in the backbone model. And there where I ran into problems with the virtual DOM. Since the virtual DOM compares the old DOM state to the new DOM state. If you remove an element from the DOM it compares it to the wrong element, and removes the wrong element. Since the function to compare the old DOM to the new DOM compares on the order in the DOM. With adding keys you create the correct order, so it doesn't compare the wrong elements. I know this is really a vague issue, and it took me 2 days to find out what was happening. You can find the ordering and the comparing is done in this file:
https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff.js

You can also see the support of adding keys in this library:
https://github.com/TimBeyer/html-to-vdom

TLDR: If you add keys, the comparing of old vs new DOM is a little bit more reliable.

from marionette-vdom.

Related Issues (8)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.