JSFiddle - React, Tailwind, and code Playground

by tea4two

JavaScript

// revealing module pattern 

var people = (function(){

	var people = ['Will', 'steve'];
  
	// cache DOM
  var $el = $('#peopleModule');
  var $button = $el.find('button');
  var $input = $el.find('input');
  var $ul = $el.find('ul');
  var template = $el.find('#people-template').html();
  
  //bind events
  $button.on('click', addPerson);
  $ul.on('click', 'i.del', deletePerson);
  
  // rendering
  function _render() {
  	$ul.html(
    	Mustache.render(template, {people: people})
    );
  }
  _render();
  
  // 追加
  function addPerson(value) {
  	// valueは外部から
  	var name = (typeof value === 'string') ? value : $input.val();
  	people.push(name);
    _render();
    $input.val('');
  }
  
  //削除
  function deletePerson(event) {
  	var index;
    
    //外部から
    if(typeof event === 'number') {
    	index = event;
    }
    //普通にdeleteボタンを押したとき
    else {
    	var $remove = $(event.target).closest('li');
      var index = $ul.find('li').index($remove);	  
    }
  	
    people.splice(index, 1);
    _render();
  }
  
  // reveal
  return {
  	addPerson: addPerson,
    deletePerson: deletePerson
  };

})();