Item

<fine-item id='myItem1'
  config='{
    "data": {
      "country": "Vietnam",
      "capital": "Hanoi"
    }
  }'>
  <item-template>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <span>##data.country##</span>
        </div>
        <div class="col-sm-6 clickable">
          <span>##data.capital##</span>
        </div>
      </div>  
    </div>
  </item-template>
</fine-item>

<script type="text/javascript">
  fine.ready(function(e) {
    var el = document.getElementById('myItem1');
    el.setConfig({
      clientEvents: {
        'item-click': 'onClientItemClick',
        'item-mouseover': 'onClientItemMouseover',
        'item-mouseout': 'onClientItemMouseout',
        'element-click': 'onClientElementClick'
      }
    });
    fine.addListener(el, 'item-click', onItemClick);
    fine.addListener(el, 'item-mouseover', onItemMouseover);
    fine.addListener(el, 'item-mouseout', onItemMouseout);
    fine.addListener(el, 'element-click', onElementClick);
  });
  
  var order = 0;
  var logDiv = fine.get('#log');
    
  function log(msg, obj) {
    order += 1;
    logDiv.innerText += order + '. ' + msg + '\n';
  }
  
  function onItemClick(e) {
    log('myItem1 item clicked!');
  }

  function onClientItemClick(arg) {
    log('myItem1 client item clicked!');
  }
  
  //...
</script>