68 lines
No EOL
1.7 KiB
Markdown
68 lines
No EOL
1.7 KiB
Markdown
## m.withAttr
|
|
|
|
This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.
|
|
|
|
Typically, it's used in conjunction with [`m.prop`](mithril.prop.md) to implement data binding in the view-to-model direction.
|
|
|
|
This method is provided to decouple the browser's event model from the controller/logic model.
|
|
|
|
You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).
|
|
|
|
---
|
|
|
|
### Usage
|
|
|
|
```javascript
|
|
//standalone usage
|
|
document.body.onclick = m.withAttr("title", function(value) {
|
|
//alerts the title of the body element when it's clicked
|
|
alert(value);
|
|
})
|
|
```
|
|
|
|
A contrived example of bi-directional data binding
|
|
|
|
```javascript
|
|
var user = {
|
|
model: function(name) {
|
|
this.name = m.prop(name);
|
|
},
|
|
controller: function() {
|
|
this.user = new user.model("John Doe");
|
|
},
|
|
view: function(controller) {
|
|
m.render("body", [
|
|
m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})
|
|
]);
|
|
}
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
### Signature
|
|
|
|
[How to read signatures](how-to-read-signatures.md)
|
|
|
|
```clike
|
|
EventHandler withAttr(String property, void callback(any value))
|
|
|
|
where:
|
|
EventHandler :: void handler(Event e)
|
|
```
|
|
|
|
- **String property**
|
|
|
|
Defines the property of the DOM element whose value will be passed to the callback.
|
|
|
|
- **void callback(any value)**
|
|
|
|
This function will be called with the value of the defined property as an argument.
|
|
|
|
- **any value**
|
|
|
|
This is the value of the defined DOM element's property.
|
|
|
|
- **returns EventHandler handler**
|
|
|
|
This handler method can be assigned to properties like `onclick`, or passed as callbacks to `addEventListener`. |