Merge remote-tracking branch 'origin/rewrite' into rewrite
This commit is contained in:
commit
e58fa538bc
3 changed files with 73 additions and 18 deletions
|
|
@ -228,7 +228,7 @@ m(BetterHeader, {
|
||||||
})
|
})
|
||||||
|
|
||||||
// clearer consumption use case
|
// clearer consumption use case
|
||||||
m(Header, {
|
m(BetterHeader, {
|
||||||
title: [
|
title: [
|
||||||
m("h1", "My title"),
|
m("h1", "My title"),
|
||||||
m("small", "A small note"),
|
m("small", "A small note"),
|
||||||
|
|
@ -266,4 +266,4 @@ var Component = {
|
||||||
m.render(document.body, m(Component, {greeting: "hello"}))
|
m.render(document.body, m(Component, {greeting: "hello"}))
|
||||||
// caling a second time does not modify DOM
|
// caling a second time does not modify DOM
|
||||||
m.render(document.body, m(Component, {greeting: "hello"}))
|
m.render(document.body, m(Component, {greeting: "hello"}))
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -186,20 +186,6 @@ m("select", {selectedIndex: 0}, [
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### SVG and MathML
|
|
||||||
|
|
||||||
Mithril fully supports SVG. Xlink is also supported, but unlike in pre-v1.0 versions of Mithril, must have the namespace explicitly defined:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
m("svg", [
|
|
||||||
m("image[xlink:href='image.gif']")
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
MathML is also fully supported.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Components
|
### Components
|
||||||
|
|
||||||
[Components](components.md) allow you to encapsulate logic into a unit and use it as if it was an element. They are the base for making large, scalable applications.
|
[Components](components.md) allow you to encapsulate logic into a unit and use it as if it was an element. They are the base for making large, scalable applications.
|
||||||
|
|
@ -279,6 +265,20 @@ To learn more about keys, [see the keys page](keys.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### SVG and MathML
|
||||||
|
|
||||||
|
Mithril fully supports SVG. Xlink is also supported, but unlike in pre-v1.0 versions of Mithril, must have the namespace explicitly defined:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
m("svg", [
|
||||||
|
m("image[xlink:href='image.gif']")
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
MathML is also fully supported.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Making templates dynamic
|
### Making templates dynamic
|
||||||
|
|
||||||
Since nested vnodes are just plain Javascript expressions, you can simply use Javascript facilities to manipulate them
|
Since nested vnodes are just plain Javascript expressions, you can simply use Javascript facilities to manipulate them
|
||||||
|
|
@ -326,7 +326,7 @@ You cannot use Javascript statements such as `if` or `for` within Javascript exp
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Anti-patterns
|
### Avoid Anti-patterns
|
||||||
|
|
||||||
Although Mithril is flexible, some code patterns are discouraged:
|
Although Mithril is flexible, some code patterns are discouraged:
|
||||||
|
|
||||||
|
|
@ -370,7 +370,7 @@ var BetterSelect = {
|
||||||
// PREFER refactor variability out
|
// PREFER refactor variability out
|
||||||
var BetterLabeledComponent = {
|
var BetterLabeledComponent = {
|
||||||
view: function(vnode) {
|
view: function(vnode) {
|
||||||
m("div", [
|
return m("div", [
|
||||||
m("label", vnode.attrs.title),
|
m("label", vnode.attrs.title),
|
||||||
vnode.children,
|
vnode.children,
|
||||||
])
|
])
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
- [Cancelling redraw from event handlers](#cancelling-redraw-from-event-handlers)
|
- [Cancelling redraw from event handlers](#cancelling-redraw-from-event-handlers)
|
||||||
- [Component `controller` function](#component-controller-function)
|
- [Component `controller` function](#component-controller-function)
|
||||||
- [Component arguments](#component-arguments)
|
- [Component arguments](#component-arguments)
|
||||||
|
- [`view()` parameters](#view-parameters)
|
||||||
- [Passing components to `m()`](#passing-components-to-m)
|
- [Passing components to `m()`](#passing-components-to-m)
|
||||||
- [Passing vnodes to `m.mount()` and `m.route()`](#passing-vnodes-to-mmount-and-mroute)
|
- [Passing vnodes to `m.mount()` and `m.route()`](#passing-vnodes-to-mmount-and-mroute)
|
||||||
- [`m.route.mode`](#mroutemode)
|
- [`m.route.mode`](#mroutemode)
|
||||||
|
|
@ -14,6 +15,7 @@
|
||||||
- [Reading/writing the current route](#readingwriting-the-current-route)
|
- [Reading/writing the current route](#readingwriting-the-current-route)
|
||||||
- [Accessing route params](#accessing-route-params)
|
- [Accessing route params](#accessing-route-params)
|
||||||
- [`m.request`](#mrequest)
|
- [`m.request`](#mrequest)
|
||||||
|
- [`xlink` namespace required](#xlink-namespace-required)
|
||||||
|
|
||||||
## `m.component` removed
|
## `m.component` removed
|
||||||
|
|
||||||
|
|
@ -181,6 +183,37 @@ var component = {
|
||||||
m("div", m(component, { fooga : 1 }));
|
m("div", m(component, { fooga : 1 }));
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## `view()` parameters
|
||||||
|
|
||||||
|
In `v0.2.x` view functions are passed a reference to the `controller` instance and (optionally) any options passed to the component. In `v1.x` they are passed **only** the `vnode`, exactly like the `controller` function.
|
||||||
|
|
||||||
|
### `v0.2.x`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
m.mount(document.body, {
|
||||||
|
controller : function() {},
|
||||||
|
|
||||||
|
view : function(ctrl, options) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### `v1.x`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
m.mount(document.body, {
|
||||||
|
oninit : function(vnode) {
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
|
||||||
|
view : function(vnode) {
|
||||||
|
// Use vnode.state instead of ctrl
|
||||||
|
// Use vnode.attrs instead of options
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
## Passing components to `m()`
|
## Passing components to `m()`
|
||||||
|
|
||||||
In `v0.2.x` you could pass components as the second argument of `m()` w/o any wrapping required. To help with consistency in `v1.x` they must always be wrapped with a `m()` invocation.
|
In `v0.2.x` you could pass components as the second argument of `m()` w/o any wrapping required. To help with consistency in `v1.x` they must always be wrapped with a `m()` invocation.
|
||||||
|
|
@ -377,3 +410,25 @@ m.prop.merge([
|
||||||
```
|
```
|
||||||
|
|
||||||
Additionally, if the `extract` option is passed to `m.request` the return value of the provided function will be passed to the [m.prop stream](prop.md) directly, and any `deserialize` callback is ignored.
|
Additionally, if the `extract` option is passed to `m.request` the return value of the provided function will be passed to the [m.prop stream](prop.md) directly, and any `deserialize` callback is ignored.
|
||||||
|
|
||||||
|
## `xlink` namespace required
|
||||||
|
|
||||||
|
In `v0.2.x` when generating SVGs using `m()` the `xlink` namespace would automatically be added on certain attributes. For consistency in `v1.x` if you want to namespace an attribute you must do it yourself.
|
||||||
|
|
||||||
|
### `v0.2.x`
|
||||||
|
|
||||||
|
```js
|
||||||
|
m("svg",
|
||||||
|
// the `href` attribute is namespaced automatically
|
||||||
|
m("image[href='image.gif']")
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
### `v1.x`
|
||||||
|
|
||||||
|
```js
|
||||||
|
m("svg",
|
||||||
|
// User-specified namespace on the `href` attribute
|
||||||
|
m("image[xlink:href='image.gif']")
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue