ractivejs - Ractive 事件可以在使用三重存储语法呈现的标记中工作吗？

Question

如果我的 Ractive 模板中有以下内容:

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

然后我可以用这个来监听点击:

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

但是假设我将相同的标记存储在名为 clicklyspan 的字符串变量中:

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

我使用三重存储语法在模板中呈现它:

{{{clicklyspan}}} 

handleClick 监听器不再被触发。我可以做些什么来强制对呈现的模板进行某种更新，以便监听器正常工作？说，在我这样做之后 app.set()称呼？

这是一个 fiddle证明问题。

谢谢，
戴夫

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';
    }
  }
});

您还需要使用它而不是三重 mustache :

{{> myFunction() }}

这是相应的 jsfiddle .

当然，替换 myFunction用你喜欢的任何名字。

我发现有用的相关问题:

RactiveJS events on tripple mustache