Can reactive events work in markup displayed using three-line syntax?

Question

If my Ractive template has the following:

<span on-click='handleClick'>click me</span>

Then I can listen for the click with this:

app.on({
    handleClick:function() {
        alert("clicked!") ;
    }
})

But let's say I have the same markup that is stored in a string variable called clicklyspan:

app.set("clicklyspan", "<span on-click='handleClick'>click me</span>")

and I do it in a template using three-line syntax:

{{{clicklyspan}}} 

The handleClick listener no longer starts. Is there anything I can do to force some kind of update of the displayed template so that the listener works? Say, after I make this call app.set()?

Here's a fiddle demonstrating the problem.

Thanks Dave

Answer 1

Ractive, , , , partials, :

var app = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    myFunction: function() {
        var template = '<a on-click="handleClick">I can now be clicked as well!</a>';
        if (!this.partials.myFunction) {
            this.partials.myFunction = template;
        }
        else {
            this.resetPartial('myFunction', template);
        }
        return 'myFunction';
    }
  }
});

:

{{> myFunction() }}

jsfiddle.

, myFunction , .

:

RactiveJS