How does Ractive's proxy-load work?

Question

I want to know when a DOM element generated by Ractive is ready. In my case, I want to use jquery to attach an autocomplete function onto the element. Ideally it would go something like this:

Template:

{{#list}}
<input type="text" proxy-load="attach-typeahead">
{{/list}}

Javascript:

ractive.on("attach-typeahead", function(event){
    $(event.node).typeahead(...);
})

But the event never fires even though I remeber seeing proxy-load mentioned somewhere in the documentation. What's the proper way to do what I'm trying to do? Thanks.

Answer 1

Codler's answer is spot on - transitions can be used to attach behaviour to nodes (and detach it, with outro).

As of the latest (0.3.8) version, there's another method, which behaves similarly but is slightly more streamlined for this purpose: decorators.

The documentation hasn't been written yet (my bad), but you can see a typeahead decorator here. A decorator is simply a function that gets called as soon as a node is added to the DOM, and which returns an object with a teardown() method that gets called as soon as the node is removed from the DOM.

You can make a decorator globally available like so:

Ractive.decorators.foo = function ( node ) {
  // do some setup work with the node here...

  return {
    teardown: function () {
      // do any necessary cleanup here
    }
  };
};

Or you can specify per-instance decorators, as in the fiddle.

Another decorator example here, this time a sortable list.

Answer 2

The proxy-events are mentioned here in the documentation of ractive. Your example doesn't work because the input element does not have a native load event.

All the ractive functions have a complete function callback that fires when the rendering has completed. Maybe you can use that.

Answer 3

You can use the intro attribute. It is a transition in ractive. When the DOM are created, intro will be called. You can find more info here https://github.com/RactiveJS/Ractive/wiki/Transitions