don't copy state anymore

This commit is contained in:
Leo Horie 2016-07-08 00:40:52 -04:00
parent 40ff3c89b5
commit cece44d4ac
4 changed files with 8 additions and 42 deletions

View file

@ -77,31 +77,11 @@ To learn more about lifecycle methods, [see the lifecycle methods page](lifecycl
Like all virtual DOM nodes, component vnodes can have state. Component state is useful for supporting object-oriented architectures, for encapsulation and for separation of concerns.
The state of a component can be accessed three ways: as a blueprint at initialization, via `vnode.state` and via the `this` keyword in component methods.
#### At initialization
Any property attached to the component object is deep-cloned for every instance of the component. This allows simple state initialization.
In the example below, `data` is a property of the `Input` component's state object.
```javascript
var ComponentWithInitialState = {
data: "Initial content",
view: function(vnode) {
return m("div", vnode.state.data)
}
}
m(ComponentWithInitialState)
// Equivalent HTML
// <div>Initial content</div>
```
The state of a component can be accessed two ways: via `vnode.state` and via the `this` keyword in component methods.
#### Via vnode.state
State can also be accessed via the `vnode.state` property, which is available to all lifecycle methods as well as the `view` method of a component.
State can be accessed via the `vnode.state` property, which is available to all lifecycle methods as well as the `view` method of a component.
```javascript
var ComponentWithDynamicState = {

View file

@ -19,7 +19,9 @@ h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
var m = require("../../mithril")
var Editor = {
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
oninit: function() {
this.data = "# Markdown Editor\n\nType on the left panel and see the result on the right panel"
},
view: function(vnode) {
return [
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),

View file

@ -25,7 +25,9 @@ renderer.setEventCallback(run)
var trust = require("../../render/trust")
var Editor = {
data: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
oninit: function() {
this.data = "# Markdown Editor\n\nType on the left panel and see the result on the right panel"
},
view: function(vnode) {
return [
m("textarea.editor-input", {oninput: function(e) {vnode.state.data = e.target.value}}, vnode.state.data),

View file

@ -576,22 +576,4 @@ o.spec("component", function() {
o(vnode.dom).notEquals(updated.dom)
})
})
o.spec("state", function() {
o("deep copies state", function() {
var called = 0
var component = {
data: [{a: 1}],
oninit: init,
view: function() {
return ""
}
}
render(root, [{tag: component}])
function init(vnode) {
o(vnode.state.data).deepEquals([{a: 1}])
}
})
})
})