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>
  
  <div class="wall" id="wall" data-wall>
    <script type="text/html" data-wall-record-template>
      <div class="item">
        <img src="{{profile_image_url}}" /> <a href="http://twitter.com/{{from_user}}">@{{from_user}}</a>: <span>{{text}}</span>
        <button class="delete-button" data-delete-button>&times;</button>
      </div>
    </script>
  </div>
  
  <div class="loading" data-loading>
    Loading...
  </div>
  
  <button data-load-button>Load</button>
  
</body>
</html>
​
 
.loading {display:none;}
​
.wall .item {
  position:relative;
  border:1px solid silver;
  padding:1em;
  margin:.5em 0;
}
​
.wall .delete-button {
  position:absolute;
  top:1em;
  right:1em;
}
 
$(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));
  };
  
  
  // Render record
  $.fn.record = function(data)
  {
    var self = (this);
    
    self.data = data;
    
    self.append($('[data-wall-record-template]').template(data));
    
    self.find('[data-delete-button]').on('click', function(event) {
      self.trigger('delete', [self]);
    });
    
    return self;
  };
  
  
  // Render wall
  $.fn.wall = function()
  {
    var self = $(this);
  
    // Add one record
    self.on('addRecord', function(event, data) {
      var record = $('<div />').record(data);
      
      record.on('delete', function(event, record) {
        record.remove();
      });
      
      self.append(record);
      
      return false;
    });
  
    // Add many records
    self.on('addRecords', function(event, items) {
      $(items).each(function(index, value) {
        self.trigger('addRecord', [value]);
      });
      
      return false;
    });
    
    
    // Load records by query
    self.on('startLoad', function(event, query) {
      self.startLoad('https://search.twitter.com/search.json?callback=?', {q: 'google'}, function(data) {
        self.trigger('addRecords', [data.results]);
      });
    });
  
    return self;
  };
  
  
  // Init
  var wall = $('[data-wall]').wall();
  
  
  // Run
  $('[data-load-button]').on('click', function() {
    wall.trigger('startLoad', ['google']);
  });
  
  
  // By time out
  (function() {
    wall.trigger('startLoad', ['google']);
    //setTimeout(arguments.callee.caller, 10000);
  })();
  
  
  // Global catch events
  var loadCount = 0;
  
  $(document).on('startLoad', function() {
    $('[data-loading]').show();
    loadCount++;
  }).on('finishLoad', function() {
    loadCount--;
    
    if (loadCount <= 0) {
      $('[data-loading]').hide();
      loadCount = 0;
    }
  });
  
});
Output

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

Dismiss x
public
Bin info
jmaspro
0viewers