add warning to readme about sharing eventlistener data between VNodes

pull/35/head
Eric Gjertsen 9 years ago
parent 2ff37ecb1d
commit 136a9a8bfa

@ -351,6 +351,44 @@ h('div', [
Snabbdom allows swapping event handlers between renders. This happens without
actually touching the event handlers attached to the DOM.
Note, however, that **you should be careful when sharing event handlers between
VNodes**, because of the technique this module uses to avoid re-binding
event handlers to the DOM. (And in general, sharing data between VNodes is
not guaranteed to work, because modules are allowed to mutate the given data).
In particular, you should **not** do something like this:
```javascript
// Does not work
var sharedHandler = {
change: function(e){ console.log('you chose: ' + e.target.value); }
};
h('div', [
h('input', {props: {type: 'radio', name: 'test', value: '0'},
on: sharedHandler}),
h('input', {props: {type: 'radio', name: 'test', value: '1'},
on: sharedHandler}),
h('input', {props: {type: 'radio', name: 'test', value: '2'},
on: sharedHandler})
]);
```
For many such cases, you can use array-based handlers instead (described above).
Alternatively, simply make sure each node is passed unique `on` values:
```javascript
// Works
var sharedHandler = function(e){ console.log('you chose: ' + e.target.value); };
h('div', [
h('input', {props: {type: 'radio', name: 'test', value: '0'},
on: {change: sharedHandler}}),
h('input', {props: {type: 'radio', name: 'test', value: '1'},
on: {change: sharedHandler}}),
h('input', {props: {type: 'radio', name: 'test', value: '2'},
on: {change: sharedHandler}})
]);
```
## Helpers
### Thunks

Loading…
Cancel
Save