You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/edge/Method calls.md.hbs
-2Lines changed: 0 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@ title: 'Method calls'
4
4
5
5
*See also: {{{createLink'proxy events'}}}*
6
6
7
-
__Note:__ Unqualified event method calls are deprecated and have been replaced with event expressions that resolve the same way as every other expression in a Ractive template. This means that to call, for instance, `set('foo', 'bar')` in an event, you would now use `@this.set('foo', 'bar')`. Unfortunately, this adds a bit of boilerplate to common method calls, but it is also resolves the disparity between event directives and other template references, allows calling data methods from events, and allows executing multiple, possibly more complex, expressions when an event fires.
8
-
9
7
As an alternative to {{{createLink'proxy events'}}}, you can execute any expression(s) supported by Ractive in response to an {{{createLink'event directives''event directive'}}}, right from your template:
Copy file name to clipboardExpand all lines: docs/edge/Proxy events.md.hbs
+1-47Lines changed: 1 addition & 47 deletions
Original file line number
Diff line number
Diff line change
@@ -29,43 +29,13 @@ The first argument to a proxy event handler is always a Ractive `event` object.
29
29
30
30
* `event.name` - the name of the event, in this case 'activate'
31
31
* `event.node` - the DOM node in question
32
-
* `event.keypath` - the {{{createLink'Keypaths''keypath'}}} of the current context
33
-
* `event.context` - the value of `this.get(event.keypath)`
34
-
* `event.index` - a map of index references
35
32
* `event.component` - the component that raised the event, only present on {{{createLink'event bubbling''bubbled events'}}}
36
33
* `event.original` - the original DOM event, if available
37
34
38
-
In the example above, `event.keypath` might be `items.0` for the first item in the list, `items.1` for the second, and so on. The `event.index` map would have a property `i`, which would correspond to those indices.
35
+
The event is also a context object with a number of context-relative methods. See {{{createLink'Ractive.getNodeInfo()''node info helpers''helpers'}}} for more details.
39
36
40
37
The event object is also available in event handlers using `this.event`, see {{{createLink'publish-subscribe''publish-subscribe''accessing-the-event-object'}}} for more details.
41
38
42
-
### Custom arguments
43
-
44
-
__NOTE:__ Arguments to proxy events have been deprecated because they are too easy to break. If you need to pass arguments with your event, you can use `@this.fire('myEvent', event, arg1, arg2, etc)`.
45
-
46
-
We might want to pass arguments to our handler in addition to the `event` object. We can do that by listing them, comma-separated, after the event name:
47
-
48
-
```html
49
-
<h1>Let's shop!</h1>
50
-
<ul>
51
-
\{{#eachitems: i}}
52
-
<li>
53
-
<p>\{{i+1}}: \{{description}}</p>
54
-
<label><inputvalue='\{{qty}}'> Quantity</label>
55
-
56
-
<!-- when the user clicks this button, add {\{qty}} of this item -->
57
-
<buttonon-click='addToCart:\{{this}},\{{qty}}'>Add to cart</button>
58
-
</li>
59
-
\{{/each}}
60
-
</ul>
61
-
```
62
-
63
-
```js
64
-
ractive.on( 'addToCart', function ( event, item, qty ) {
65
-
/* code goes here */
66
-
});
67
-
```
68
-
69
39
### Cancelling DOM events
70
40
71
41
If you return `false` from a proxy event handler, ractive will automatically call both `preventDefault()` and `stopPropagation()` on the original DOM event.
@@ -78,19 +48,3 @@ If you only want to cancel the DOM event, you can call the appropriate methods d
78
48
## Reserved event names
79
49
80
50
Note: the built-in {{{createLink'lifecycle events'}}} are **reserved**, which means you can't use their names as proxy events.
81
-
82
-
83
-
## Dynamic proxy event names
84
-
85
-
{{{createLink'Mustaches''Mustache references'}}} can be used as proxy event names:
86
-
87
-
```html
88
-
<buttonon-click="\{{handler}}">click me!</button>
89
-
```
90
-
91
-
In practive this is of limited value, but a more important side effect is that if no handler is specified (a falsey value) the DOM event is not subscribed and will unsubscribe or resubscribe as the handler value changes. Combined with a conditional section, this allows a proxy event to be conditionally subscribed _at the DOM level_:
0 commit comments