vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "Fix docs error"

Browse source
This commit is contained in:
Isiah Meadows 2016-01-22 08:18:19 -05:00
parent f2540f3d04
commit a8eb0fb082
1 changed files with 8 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/mithril.component.md
View file

@ -43,7 +43,7 @@ var MyComponent = {
m.mount(document.body, MyComponent) // renders <h1>Hello</h1> into <body> m.mount(document.body, MyComponent) // renders <h1>Hello</h1> into <body>
``` ```
The optional `controller` function creates an object that may be used in the following recommended ways: The optional `controller` function creates an object that may be used in the following recommended ways:
- It can contain methods meant to be called by a `view`. - It can contain methods meant to be called by a `view`.
- It can call model methods directly or from methods inside the resulting object. - It can call model methods directly or from methods inside the resulting object.
@ -211,7 +211,7 @@ var App = {
view: function() { view: function() {
return m(".app", [ return m(".app", [
m("h1", "My App"), m("h1", "My App"),
//nested component //nested component
m.component(MyComponent, {message: "Hello"}) m.component(MyComponent, {message: "Hello"})
]) ])
@ -246,7 +246,7 @@ var App = {
return m(".app", [ return m(".app", [
//pressing the button reverses the list //pressing the button reverses the list
m("button[type=button]", {onclick: function() {ctrl.data.reverse()}}, "My App"), m("button[type=button]", {onclick: function() {ctrl.data.reverse()}}, "My App"),
ctrl.data.map(function(item) { ctrl.data.map(function(item) {
//the key ensures the components aren't recreated from scratch, if they merely exchanged places //the key ensures the components aren't recreated from scratch, if they merely exchanged places
return m.component(MyComponent, {message: "Hello " + item, key: item}) return m.component(MyComponent, {message: "Hello " + item, key: item})
@ -327,12 +327,12 @@ var ctrl = new TemperatureConverter.controller();
assert(ctrl.kelvinToCelsius(273.15) == 0) assert(ctrl.kelvinToCelsius(273.15) == 0)
//test the template //test the template
var tpl = TemperatureConverter.view(ctrl, {value: 273.15}) var tpl = TemperatureConverter.view(null, {value: 273.15})
assert(tpl.children[1] == 0) assert(tpl.children[1] == 0)
//test with real DOM //test with real DOM
var testRoot = document.createElement("div") var testRoot = document.createElement("div")
m.render(testRoot, TemperatureConverter.view(ctrl, {value: 273.15})) m.render(testRoot, TemperatureConverter.view(null, {value: 273.15}))
assert(testRoot.innerHTML.indexOf("celsius:0") > -1) assert(testRoot.innerHTML.indexOf("celsius:0") > -1)
``` ```
@ -451,7 +451,7 @@ var component = {
var unsaved = m.prop(false) var unsaved = m.prop(false)
return { return {
unsaved: unsaved, unsaved: unsaved,
onunload: function(e) { onunload: function(e) {
if (unsaved()) { if (unsaved()) {
e.preventDefault() e.preventDefault()
@ -538,7 +538,7 @@ There are a few other technical caveats when nesting components:
2. Nested components cannot change `m.redraw.strategy` from the controller constructor (but they can from event handlers). It's recommended that you use the [`ctx.retain`](mithril.md#persisting-dom-elements-across-route-changes) flag instead of changing the redraw strategy in controller constructors. 2. Nested components cannot change `m.redraw.strategy` from the controller constructor (but they can from event handlers). It's recommended that you use the [`ctx.retain`](mithril.md#persisting-dom-elements-across-route-changes) flag instead of changing the redraw strategy in controller constructors.
3. The root DOM element in a component's view must not be changed during the lifecycle of the component, otherwise undefined behavior will occur. In other words, don't do this: 3. The root DOM element in a component's view must not be changed during the lifecycle of the component, otherwise undefined behavior will occur. In other words, don't do this:
```javascript ```javascript
var MyComponent = { var MyComponent = {
view: function() { view: function() {
@ -603,3 +603,4 @@ where:
- **returns Component parameterizedComponent** - **returns Component parameterizedComponent**
A component with arguments bound A component with arguments bound