ractivejs/ractive — pull request #1146 by Rich-Harris (2014-08-25 01:07:27+00:00)
Title: Method calls

This pull request is in the same spirit as #1141 - it's a work-in-progress (e.g. no tests/error handling!), put here in hopes of stimulating discussion and catching any howlers before it gets merged in. Like `{{yield}}`, this is a feature that I'd sort of envisaged as part of the next major release (0.6.0 - not semver major, but whatever), but there's no harm in getting it out there sooner so we can sweep up any bugs.

For detailed background, see #568 (from [this comment](https://github.com/ractivejs/ractive/issues/568#issuecomment-47437324) onwards). The idea is to replace (eventually - this PR doesn't break any existing code) the current event syntax. Instead of...

```html
select object
```

```js
ractive.on( 'select', function ( event, object ) {
this.set( 'selected', object );
});
```

...we can do this instead:

```html
select object
```

It could be any method belonging to the current instance, even `teardown()`:

```html
self-destruct!
```

If you need to access the `event` object, you can:

```html

```

I didn't fully realise how powerful this pattern is at first. Here's an 80% complete TodoMVC implementation (we're using the [key event plugin](http://ractivejs.github.io/ractive-events-keys/) for `on-enter`):

```html

{{#each todos :i}}

x

{{description}}

{{/each}}
```

You can still fire 'proxy events' to achieve the same effect as the old syntax...

```html
select object
```

...but the need to fire events like this will be much less frequent. (In fact, I did wonder about rewriting the existing event handler code so that `select:{{object}}` is automatically treated as `fire("select",event,object)` at parse time, to make the runtime code a bit leaner. But there are a couple of edge cases where rewriting gets tricky. Never mind, if we decide to deprecate the old syntax, we'll be able to delete that extra code soon enough.)

## So...

As I say this is a WIP but I hope to merge it in soon. If anyone has any strong objections, speak now or forever hold your peace! The only major outstanding question is whether the old syntax *should* be deprecated over the next few versions - my vote is yes (it's less intuitive, more verbose in most cases, has more edge cases, and is a maintenance burden).

If you want to try it out in the meantime, here are some steps (should probably come up with a way to host feature builds online...):

```bash
# clone this repo, switch to the method-calls branch
git clone -b method-calls https://github.com/ractivejs/ractive

# install dev dependencies
npm install

# install gobble-cli (build tool)
npm install -g gobble-cli

# run the build
gobble
open http://localhost:4567/sandbox
```

Then, copy the `sample` folder in `sandbox`, and poke around with the `index.html` file therein.