No option to convert HTML with keys.

[trystian1]

There is no option to convert HTML with keys in the attachElContent function.
If you are removing/adding/reordering elements these can get lost, and thus resulting in bad html.
In my project I fixed it now as following:

attachElContent: function(html) {

      var convertHTMLWithKey = convertHTML.bind(null, {
          getVNodeKey: function (attributes) {
              console.log(attributes)
              return attributes.id;
          }
      });

      var newVirtualEl = convertHTMLWithKey(this.rootTemplate({
        content: Backbone.$.trim(html)
      }));

      if (this.virtualEl) {
        var patches = diff(this.virtualEl, newVirtualEl);
        console.log(this.el, patches);
        patch(this.el, patches);
      }
      else {
        this.$el.html(Backbone.$.trim(html));
      }
      this.virtualEl = newVirtualEl;
      return this;
    },

Since attachElContent is called from the marionette code, you cannot add options. So still finding a correct way of fixing this.

[themindfuldev]

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

[trystian1]

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.