Skip to content

Commit a4709ca

Browse files
committed
remove references to proxy event args and unprefixed methods
1 parent fb91ac4 commit a4709ca

File tree

2 files changed

+1
-49
lines changed

2 files changed

+1
-49
lines changed

docs/edge/Method calls.md.hbs

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ title: 'Method calls'
44

55
*See also: {{{createLink 'proxy events'}}}*
66

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-
97
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:
108

119
```html

docs/edge/Proxy events.md.hbs

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -29,43 +29,13 @@ The first argument to a proxy event handler is always a Ractive `event` object.
2929

3030
* `event.name` - the name of the event, in this case 'activate'
3131
* `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
3532
* `event.component` - the component that raised the event, only present on {{{createLink 'event bubbling' 'bubbled events'}}}
3633
* `event.original` - the original DOM event, if available
3734

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.
3936

4037
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.
4138

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-
\{{#each items: i}}
52-
<li>
53-
<p>\{{i+1}}: \{{description}}</p>
54-
<label><input value='\{{qty}}'> Quantity</label>
55-
56-
<!-- when the user clicks this button, add {\{qty}} of this item -->
57-
<button on-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-
6939
### Cancelling DOM events
7040

7141
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
7848
## Reserved event names
7949

8050
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-
<button on-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_:
92-
93-
```html
94-
<button on-click="\{{#active}}select\{{/}}">click me!</button>
95-
```
96-
In this example, the DOM `click` event is subscribed and unsubscribed as the value of `active` is truthy or falsey.

0 commit comments

Comments
 (0)