Semantic UI - Ractive Component - Toolbar

Toolbar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script id="templ" type="text/ractive">

  <div class="ui labeled icon compact menu">
    {{#items:i}}
    <a class="item" on-click="items.{{i}}">
      <i class="{{icon}} icon"></i>{{text}}
    </a>
    {{/items}}

  </div>

</script>

<main></main>

JavaScript

var handleUpload = function(e) {
  console.log('in upload', e.keypath);
}

var handleDownload = function(e) {
  console.log('in download', e.keypath);
}
var items = [{
  text: 'Upload',
  icon: 'upload'
}, {
  text: 'Download',
  icon: 'download'
}];

var MyToolbar = Ractive.extend({
  template: '#templ'

})

var MyToolbarWrapper = Ractive.extend({
  template: '<MyToolbar items="{{items}}"/>',

  components: {
    MyToolbar: MyToolbar
  },
  data() {
    return {
      items: items
    }
  },
  oninit() {
    this.on('MyToolbar.items.*', function(e) {
      console.log('generic')
    })
    this.on('MyToolbar.items.0', handleUpload)
    this.on('MyToolbar.items.1', handleDownload)
  }

});

new Ractive({
  el: 'main',
  template: '<MyToolbarWrapper/>',
  components: {
    MyToolbarWrapper: MyToolbarWrapper
  },
  append: true
})