Riot.js: minimal observable example

by gianlucaguarini

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<scheduler></scheduler>

<!-- scheduler -->
<script type="riot/tag">
  <scheduler>
      <table>
          <thead>
              <th each="{ col, i in columns }">{ col }</th>
          </thead>
          <tbody>
              <tr each="{ schedule in schedules }" model="{ schedule }" riot-tag="schedulerow"></tr>
          </tbody>
      </table>
      <button onclick="{ addSchedule }">Add schedule</button>
      
    var self = this;
    self.columns = ['#', 'start time', 'end time', 'active'];
    self.schedules = [];
    
    var index = 0;
    self.addSchedule = function() {
        var schedule_tpl = {
            index: index++,
            start: moment().format('HH:mm'),
            end: moment().format('HH:mm'),
            active: false
        };
        self.schedules.push(schedule_tpl);
    }
      self.delSchedule = function(e) {
            var index = self.schedules.indexOf(e.item.schedule);
          
            console.log(index, e.item, e); /**********THIS*************/
            if (index !== -1) {
                self.schedules.splice(index, 1);
            }
    }
      this.updateSchedule = function(schedule) {
          var index = self.schedules.indexOf(schedule);
          self.schedules[index] = schedule
      }
      // ajax data
      setTimeout(function() {
          self.addSchedule();
          self.addSchedule();
          self.addSchedule();
          self.update();
      }, 500);
  </scheduler>
</script>

<!-- scheduler table row-->
<script type="riot/tag">
  <schedulerow>
      <td>{ index }</td>
      <td><input type="time" name="start" onkeydown="{ onkeydown }" value="{ opts.model.start }"/></td>
      <td><input type="time" name="end" onkeydown="{ onkeydown }" value="{ opts.model.end }" /></td>
      <td><input type="checkbox" checked="{ active }"/></td>
      <td><button onclick="{ parent.delSchedule }">Del schedule</button></td>
...

JavaScript

riot.mount('*');