JSFiddle - React, Tailwind, and code Playground

by Atsushi Nakatsugawa

HTML

<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.dev.js"></script>
<link rel="stylesheet" href="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.css">
<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/ejs-h5mod.js"></script>
<h1>イベントテスト</h1>
<textarea id="result" cols="50" rows="10"></textarea>
<p>
<button id="add">イベント追加</button>
<button id="delete">イベント削除</button>
</p>
<p>
<input type="text" id="value" /> <button id="update">名前変更</button>
</p>

JavaScript

$(function() {
	function ObservableArray() {
    this.name = 'Init';
  };
  
  ObservableArray.prototype.updateName = function(name) {
    this.dispatchEvent({
      type: 'changeBefore',
      data: this,
    });
    console.log('name', name);
    this.name = name;
    console.log('this', this)
    this.dispatchEvent({
      type: 'change',
      data: this,
    });    
  }
  
  h5.mixin.eventDispatcher.mix(ObservableArray.prototype);
  
  var observableArray = new ObservableArray;
  
  var listner = null;
  $('#add').on('click', function(e) {
    listner = observableArray.addEventListener('change', logger);
    console.log(listner)
  });
  
  $('#delete').on('click', function(e) {
    observableArray.removeEventListener('change', logger);
  });
  
  function logger(e) {
    console.log(e);
    $('#result').val(`${$('#result').val()}\n,change event. Name is ${e.data.name}`);
  }
  
  $('#update').on('click', function(e) {
    observableArray.updateName($('#value').val());
  });
  
  // observableArray.testMethod();
});