Ractive - Yield, nested components and events

by vikikamath

HTML

<div id="main">

</div>

CSS

.black {
  background: #000;
  color: #fff;
}

.gray {
  background: #c0c0c0;
  color: #765;
}

JavaScript

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


var app = new Ractive({
    template: "<Button>{{>aPartial}}</Button>",
    components: { Button: Button },
    el: "#main",
    append: true,
    data: {
    	classes: "black"
    },
    partials: {
    	aPartial: 'Hi I am a partial from app'
    }
});