Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <form class="todo-form" data-todo-form>
    <input type="text" data-text />
    <input type="submit" value="Add" data-submit />
  </form>
  
  <div class="todo-list" data-todo-list>
    <script type="text/html" data-todo-list-item-template>
      <div class="item">
        <input type="checkbox" data-done id="label-{{label_id}}" />
        <label for="label-{{label_id}}" data-text>{{text}}</span>
      </div>
    </script>
  </div>
  
</body>
</html>
​
 
$(function() {
  
  // Load decorator
  $.fn.startLoad = function(url, params, callback)
  {
    var self = $(this);
    
    $.getJSON(url, params, function(data) {
      callback(data);
      self.trigger('finishLoad');
    });
    
    return self;
  };
  
  
  // Render template
  $.fn.template = function(data)
  {
    var text = $(this).html();
    
    text = text.replace(new RegExp('{{([a-zA-Z_\-]+)}}', 'ig'), function(str, key) {
      return data[key] !== undefined ? data[key]: '';
    });
    
    return $($.parseHTML(text, document));
  };
  
  
  $.fn.todoItem = function(data)
  {
    var self = $(this);
    
    data.time = new Date().getTime();
    data.label_id = data.time + '-' + Math.ceil(Math.random() * 100);
    
    self.data = data;
    
    self.append($('[data-todo-list-item-template]').template(data));
    
    var checkbox = self.find('[data-done]');
    
    if (data.done !== undefined && data.done === true) {
      self.find('[data-done]').attr('checked', true);
    }
    
    self.on('done', function(event, state) {
      self.data.done = state;
      
      self.toggleClass('done', self.data.done);
      checkbox.attr('checked', state);
      
      if (self.data.done === true) {
        self.slideUp();
      } else {
        self.slideDown();
      }
      
      return false;
    });
    
    checkbox.on('change', function() {  
      self.trigger('done', [checkbox.is(':checked')]);
    });
    
    return self;
  };
  
  
  $.fn.todoList = function()
  {
    var self = $(this);
    
    self.on('add', function(event, data) {
      var item = $('<div />').todoItem(data);
      self.append(item);
      
      item.on('done', function() {
        // alert('Task is: ' + (item.data.done ? 'DONED': 'WAIT'));
      });
      
      return false;
    });
    
    return self;
  };
  
  
  $.fn.todoForm = function()
  {
    var self = $(this);
    
    self.on('submit', function(event) {
      self.trigger('todoAdd', [{
        text: self.find('[data-text]').val(),
        done: false
      }]);
      
      return false;
    });
    
    return self;
  };
  
  
  var todoList = $('[data-todo-list]').todoList();
  var todoForm = $('[data-todo-form]').todoForm();
  
  
  $(document).on('todoAdd', function(event, data) {
    todoList.trigger('add', [data]);
  });
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jmaspro
0viewers