Ractive - Yield, nested components and events

by vikikamath

JavaScript

var Button = Ractive.extend({
    template: "<button on-click=\"click\">{{yield}}</button>"
});

var Wrapper = Ractive.extend({
    template: "{{yield}}",
    oninit: function () {
        this.on("Button.click", function (e) {
            console.log("clicked");
        });
    }
});

var app = new Ractive({
    template: "<Wrapper><Button>Print something to the console</Button></Wrapper>",
    components: { Wrapper: Wrapper, Button: Button },
    el: "body",
    append: true
});

app.on('Wrapper.Button.click', function(e) {
	console.log('clicked')
})