未验证 提交 89bc7693 编写于 作者: J Jorge Bucaran 提交者: GitHub

Merge pull request #978 from coldfix/doc-fixes

Minor documentation fixes; remove mention of payload filters, use `text` in examples.
......@@ -24,7 +24,7 @@ Below is a consice recap of Hyperapp's core APIs and packages. It's geared towar
## h()
```js
h(type, props, ...children)
h(type, props, children)
```
Hyperscript function to create virtual DOM nodes (VNodes), which are used for [rendering](#rendering).
......@@ -33,7 +33,7 @@ A VNode is a simplified representation of an HTML element. It represents an elem
- **type** - Name of the node, eg: div, h1, button, etc.
- **props** - Object containing HTML or SVG attributes the DOM node will have and [special props](#special-props).
- **children** - Array of child VNodes.
- **children** - Array of child VNodes (optional).
```js
import { h, text } from "hyperapp"
......@@ -322,7 +322,7 @@ const httpFx = (dispatch, props) => {
// Do side effects
fetch(props.url, props.options)
.then((res) => res.json())
.then((data) => dispatch(data)) // Optionnally dispatch an action
.then((data) => dispatch(props.action, data)) // Optionally dispatch an action
}
// Helper to easily create the effect tuple for the Http effect
......
......@@ -111,6 +111,7 @@ Create this html file:
// -- RUN --
app({
init: {},
node: document.getElementById("app"),
view: () => h("h1", {}, [text("Hello "), h("i", {}, text("World!"))]),
})
......@@ -141,7 +142,7 @@ which _represent_ DOM nodes.
The result of
```js
h("h1", {}, ["Hello ", h("i", {}, "World!")])
h("h1", {}, [text("Hello "), h("i", {}, text("World!"))])
```
is a virtual node, representing
......@@ -261,7 +262,7 @@ into this:
...
h("p", {class: "title"}, emphasize("ocean",
"The Ocean is Sinking"
))
)),
...
```
......@@ -473,7 +474,7 @@ ternary operator (`a ? b : c`).
```js
const filterView = (props) =>
h("div", { class: "filter" }, [
"Filter:",
text("Filter:"),
props.editingFilter // <---
? h("input", { type: "text", value: props.filter }) // <---
......@@ -497,7 +498,7 @@ and update `filterView` again:
```js
const filterView = (props) =>
h("div", { class: "filter" }, [
"Filter:",
text("Filter:"),
props.editingFilter
? h("input", { type: "text", value: props.filter })
......@@ -523,7 +524,7 @@ Update `filterView` yet again:
```js
const filterView = (props) =>
h("div", { class: "filter" }, [
"Filter:",
text("Filter:"),
props.editingFilter
? h("input", {
......@@ -629,7 +630,7 @@ const filterView = (props) =>
? h("input", {
type: "text",
value: props.filter,
oninput: [SetFilter, (event) => event.target.value], // <----
oninput: (state, event) => SetFilter(state, event.target.value), // <----
})
: h("span", { class: "filter-word" }, text(props.filter)),
......@@ -639,11 +640,6 @@ const filterView = (props) =>
])
```
When we give a _function_ as the custom payload, Hyperapp considers it a _payload filter_ and passes the default
payload through it, providing the returned value as payload to the action.
> Payload filters are also useful when you need a payload that is a combination of custom data and event data
If you'd like to see a working example of the code so far, have a look [here](https://codesandbox.io/s/hyperapp-tutorial-step-2-5yv34)
## Effects <a name="effects"></a>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册