component/reactive — pull request #98 by anthonyshort (2013-09-15 03:41:38+00:00)
Title: Iteration and nested reactive instances

The major change here is that we're walking the DOM to bind attributes instead of running just a plain querySelector whenever a binding is added. There are a couple of benefits:

* This allows for bindings to tell reactive to skip parsing its children
* Iteration and nested instances are possible
* All bindings are rendered at once

Tests aren't passing yet because of an API change :)

## Iteration

I've included a simple iteration example. If the elements within the model are in fact models themselves, they will be able to emit changes and update the DOM themselves without re-rendering the entire list.

```html

{name}

{name}

```

Using the old query method we can't tell reactive to stop trying to parse the bindings of items within an iteration. Reactive would replace the `{name}` within the iteration, which we don't want. Instead, we want reactive to go down the DOM tree and process the bindings on each element. If a binding tells reactive to skip the children, it will leave them alone. Now the `data-each` binding **can create nested reactive instances**.

## API changes

The downside to this is that we now to have to add all the bindings and then call a render method:

```js
var view = reactive(el, model, view);
view.render();
```

Basically, you need to define all of your bindings before you call render or declare the bindings and run `render` again. But this shouldn't hurt too much:

```js
reactive(el, model, view)
.use(customBindings)
.use(eventBindings)
.render();
```

## Skipping Children

Skipping works by setting `this.skip` in the binding to `true`. This will tell reactive to skip and nodes within this element. This allows the bindings to control what happens inside of the sub-element effectively allowing us to create nested reactive instances.

```js
reactive.bind('data-each', function(el, attr){
this.skip = true;
});
```