document component shorthand syntax

This commit is contained in:
Leo Horie 2015-07-23 23:43:19 -04:00
parent 2b24c7a64d
commit ed3f3f0686
4 changed files with 65 additions and 0 deletions

View file

@ -6,6 +6,7 @@
- [Optional controller](#optional-controller)
- [Controller as a class constructor](#controller-as-a-class-constructor)
- [Notes on the view function](#notes-on-the-view-function)
- [Shorthand syntax](#shorthand-syntax)
- [Parameterized components](#parameterized-components)
- [Nesting components](#nesting-components)
- [Dealing with state](#dealing-with-state)
@ -148,6 +149,27 @@ The view function is run again whenever a redraw is required (i.e. whenever even
It may sound expensive to recompute an entire view any time there's a change to be displayed, but this operation actually turns out to be quite fast, compared to rendering strategies used by older frameworks. Mithril's diffing algorithm makes sure expensive DOM operations are performed only if absolutely necessary, and as an extra benefit, the global nature of the redraw makes it easy to reason about and troubleshoot the state of the application.
### Shorthand syntax
If the first argument to `m()` is a component, it acts as an alias of `m.component()`
```javascript
var MyComponent = {
controller: function() {
return {greeting: "hello"}
},
view: function(ctrl, args) {
return m("h1", ctrl.greeting + " " + args.data)
}
}
m.render(document.body, [
//the two lines below are equivalent
m(component, {data: "world"}),
m.component(component, {data: "world"})
])
```
---
### Parameterized components