virtual-dom: ev-click event binding not working, what dependencies do I need? (dom-delegator? value-event?)

I’m trying to build my own lightweight MVI system using virtual-dom in my view layer, but I’m struggling to get event binding to work.

The virtual-hyperscript README suggests that I should be able to bind events using ev-click, but none of my bound functions get fired: https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript

var virtualEl = virtualDom.h('div', {'ev-click': function(ev) {alert("Yo");}}, ['clickable']);
var domEl = virtualDom.create(virtualEl);
$('body').append(domEl);
// clicking created element has no effect

Looking around this and the mercury source suggests that I might need some extra modules like dom-delegator and value-event to get event binding working, but neither of the README’s explain how to make it work with the ev-click syntax.

I should add that I’m not using browserify. Thus far I’ve built and included virtual-dom and dom-delegator by downloading them and using browserify --standalone on each repo. I’ve included them both in my project, and created a delegator before creating elements using virtual-hyperscript:

// before virtual-dom element creation (but after source include)
delegator = new DOMDelegator()

I’ve pulled this all together in a small github repo to make it easier to see what I’m doing: https://github.com/th3james/Virtual-dom-event-binding-issue/blob/master/index.html

I can’t quote follow how dom-delegator sees and binds to the events? My understanding from this issue is it uses a shared map: https://github.com/Raynos/mercury/issues/93 …but looking at the source, I can’t see how this connection is made.

Nudges in the right direction greatly appreciated, as I’m really keen to use virtual-dom.

About this issue

Original URL
State: open
Created 9 years ago
Comments: 19 (4 by maintainers)

Most upvoted comments

Use just onclick: function (ev) { ....

Use dom-delegator only if you know what you’re doing.

staltz on Jan 12, 2015

an additional point --each time the vnode is published to the document, the number of listeners returned in chrome matches the number found in the most recently published vnode.

  var tree = (
    h('ul#m', [
      h('li', { onclick : e => console.log(e) }),
      h('li', { onclick : e => console.log(e) })
    ]));

  var newTree = (
    h('ul#m', [
      h('li', { onclick : e => console.log(e) }),
      h('li', { onclick : e => console.log(e) }),
      h('li', { onclick : e => console.log(e) })      
    ]));

  var newnewTree = (
    h('ul#m', [
      h('li', { onclick : e => console.log(e) })      
    ]));

  var treeelem = createElement(tree);
  document.body.appendChild(treeelem);

  var patches = diff(tree, newTree);
  var rootNode = patch(document.getElementById('m'), patches);

  patches = diff(newTree, newnewTree);
  rootNode = patch(document.getElementById('m'), patches);

  var listelem = document.getElementById('m');
  console.log('events: ', getevents(listelem).length); // "events: 1"

iambumblehead on Mar 15, 2016