Same as props but set attributes instead of properties on DOM elements
Same as props, but set attributes instead of properties on DOM elements.
```javascript
```javascript
h('a', {attrs: {href: '/foo'}}, 'Go to Foo');
h('a', {attrs: {href: '/foo'}}, 'Go to Foo');
```
```
Attributes are added and updated using `setAttribute`. In case of an attribute
Attributes are added and updated using `setAttribute`. In case of an attribute
that has been previously added/set is no longer present in the `attrs` object,
that has been previously added/set and is no longer present in the `attrs` object,
it is removed from the DOM element's attribute list using `removeAttribute`.
it is removed from the DOM element's attribute list using `removeAttribute`.
In the case of boolean attributes (.e.g. `disabled`, `hidden`, `selected` ...).
In the case of boolean attributes (.e.g. `disabled`, `hidden`, `selected` ...),
The meaning doesn't depend on the attribute value (`true` or `false`) but depends
the meaning doesn't depend on the attribute value (`true` or `false`) but depends
instead on the presence/absence of the attribute itself in the DOM element. Those
instead on the presence/absence of the attribute itself in the DOM element. Those
attributes are handled differently by the module: if a boolean attribute is set
attributes are handled differently by the module: if a boolean attribute is set
to a [falsy value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) (`0`, `-0`, `null`, `false`,`NaN`, `undefined`, or the empty
to a [falsy value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) (`0`, `-0`, `null`, `false`,`NaN`, `undefined`, or the empty
string (`""`)) then the attribute will be removed from the attribute list of the
string (`""`)), then the attribute will be removed from the attribute list of the
DOM element.
DOM element.
### The style module
### The style module
@ -310,7 +309,7 @@ h('span', {
```
```
Note that the style module does not remove style attributes if they are removed
Note that the style module does not remove style attributes if they are removed
as properties from the style object. To remove a style you should instead set
as properties from the style object. To remove a style, you should instead set
it to the empty string.
it to the empty string.
```javascript
```javascript
@ -321,7 +320,7 @@ h('div', {
#### Delayed properties
#### Delayed properties
You can specify properties as being delayed. Whenever these properties change
You can specify properties as being delayed. Whenever these properties change,
the change is not applied until after the next frame.
the change is not applied until after the next frame.
```javascript
```javascript
@ -335,8 +334,8 @@ This makes it easy to declaratively animate the entry of elements.
#### Set properties on `remove`
#### Set properties on `remove`
Styles set in the `remove` property will take effect once the element is about
Styles set in the `remove` property will take effect once the element is about
to be moved from the DOM. The applied styles should be animated with CSS
to be removed from the DOM. The applied styles should be animated with CSS
transitions. Only once all the styles is done animating will the element be
transitions. Only once all the styles is done animating, will the element be
removed from the DOM.
removed from the DOM.
```javascript
```javascript
@ -372,13 +371,13 @@ function clickHandler(ev) { console.log('got clicked'); }
h('div', {on: {click: clickHandler}});
h('div', {on: {click: clickHandler}});
```
```
Very often however you're not really interested in the event object itself.
Very often, however, you're not really interested in the event object itself.
Often you have some data associated with the element that triggers an event
Often you have some data associated with the element that triggers an event
and you want that data passed along instead.
and you want that data passed along instead.
Consider a counter application with three buttons, one to increment the counter
Consider a counter application with three buttons, one to increment the counter
by 1, one to increment the counter by 2 and one to increment the counter by 3.
by 1, one to increment the counter by 2 and one to increment the counter by 3.
You're don't really care exactly which button was pressed. Instead you're
You don't really care exactly which button was pressed. Instead you're
interested in what number was associated with the clicked button. The event listeners
interested in what number was associated with the clicked button. The event listeners
module allows one to express that by supplying an array at the named event property.
module allows one to express that by supplying an array at the named event property.
The first element in the array should be a function that will be invoked with
The first element in the array should be a function that will be invoked with
@ -455,7 +454,7 @@ See also the [SVG example](./examples/svg).
### Thunks
### Thunks
The `thunk` function takes a name for identifying a thunk, a function that
The `thunk` function takes a name for identifying a thunk, a function that
returns a vnode and a variable amount of state parameters. If invoked the
returns a vnode and a variable amount of state parameters. If invoked, the
render function will recieve the state parameters.
render function will recieve the state parameters.
`thunk(uniqueName, renderFn, [stateAguments])`
`thunk(uniqueName, renderFn, [stateAguments])`
@ -471,7 +470,7 @@ function numberView(n) {
}
}
```
```
The view depends only on `n`. This means that if `n` is unchanged then
The view depends only on `n`. This means that if `n` is unchanged, then
creating the virtual DOM node and patching it against the old vnode is
creating the virtual DOM node and patching it against the old vnode is
wasteful. To avoid the overhead we can use the `thunk` helper function.
wasteful. To avoid the overhead we can use the `thunk` helper function.
@ -483,7 +482,7 @@ function render(state) {
Instead of actually invoking the `numberView` function this will only place
Instead of actually invoking the `numberView` function this will only place
a dummy vnode in the virtual tree. When Snabbdom patches this dummy vnode
a dummy vnode in the virtual tree. When Snabbdom patches this dummy vnode
against a previous vnode it will compare the value of `n`. If `n` is unchanged
against a previous vnode, it will compare the value of `n`. If `n` is unchanged
it will simply reuse the old vnode. This avoids recreating the number view and
it will simply reuse the old vnode. This avoids recreating the number view and
Jon Kleiser
9 years ago