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

Data -> state

Browse source
This commit is contained in:
Pat Cavit 2016-12-07 10:07:01 -08:00 • committed by GitHub
parent b9a479d45e
commit fe2489df58
1 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

28
docs/withAttr.md
View file

@ -63,18 +63,18 @@ document.body.onclick = m.withAttr("title", function(value) {
Typically, `m.withAttr()` can be used in Mithril component views to avoid polluting the data layer with DOM event model concerns: Typically, `m.withAttr()` can be used in Mithril component views to avoid polluting the data layer with DOM event model concerns:
```javascript ```javascript
var Data = { var state = {
email: "", email: "",
setEmail: function(email) { setEmail: function(email) {
Data.email = email.toLowerCase() state.email = email.toLowerCase()
} }
} }
var MyComponent = { var MyComponent = {
view: function() { view: function() {
return m("input", { return m("input", {
oninput: m.withAttr("value", Data.setEmail), oninput: m.withAttr("value", state.setEmail),
value: Data.email value: state.email
}) })
} }
} }
@ -89,15 +89,15 @@ m.mount(document.body, MyComponent)
The `m.withAttr()` helper reads the value of the element to which the event handler is bound, which is not necessarily the same as the element where the event originated. The `m.withAttr()` helper reads the value of the element to which the event handler is bound, which is not necessarily the same as the element where the event originated.
```javascript ```javascript
var Data = { var state = {
url: "", url: "",
setURL: function(url) {Data.url = url} setURL: function(url) {state.url = url}
} }
var MyComponent = { var MyComponent = {
view: function() { view: function() {
return m("a[href='/foo']", {onclick: m.withAttr("href", Data.setURL)}, [ return m("a[href='/foo']", {onclick: m.withAttr("href", state.setURL)}, [
m("span", Data.url) m("span", state.url)
]) ])
} }
} }
@ -117,21 +117,21 @@ The first argument of `m.withAttr()` can be either an attribute or a property.
```javascript ```javascript
// reads from `select.selectedIndex` property // reads from `select.selectedIndex` property
var Data = { var state = {
index: 0, index: 0,
setIndex: function(index) {Data.index = index} setIndex: function(index) {state.index = index}
} }
m("select", {onclick: m.withAttr("selectedIndex", Data.setIndex)}) m("select", {onclick: m.withAttr("selectedIndex", state.setIndex)})
``` ```
If a value can be both an attribute *and* a property, the property value is used. If a value can be both an attribute *and* a property, the property value is used.
```javascript ```javascript
// value is a boolean, because the `input.checked` property is boolean // value is a boolean, because the `input.checked` property is boolean
var Data = { var state = {
selected: false, selected: false,
setSelected: function(selected) {Data.selected = selected} setSelected: function(selected) {state.selected = selected}
} }
m("input[type=checkbox]", {onclick: m.withAttr("checked", Data.setSelected)}) m("input[type=checkbox]", {onclick: m.withAttr("checked", state.setSelected)})
``` ```