Zipline: Use the Twitchtv JSON API

index.html

<div class="container">
  <h2 class="text-primary text-center">TwitchIt</h2>
  <hr/>
  <div id="appWrapper"></div>
</div>

<script id="appContent" type="text/template">
  <input id="search" class='form-control' type="text" placeholder="Search Twitchers"/>
  <br>
  <div class="btn-group btn-group-justified">
    <label for="tab1" class='btn'>All</label>
    <label for="tab2" class='btn'>Online</label>
    <label for="tab3" class='btn'>Offline</label>
  </div>
  <hr>
  <div id='allUsersWrapper'></div>
</script>

<script id="allUsersContent" type="text/template">
  <ul class="list-unstyled" id='allUsersList'></ul>
</script>

<script id="userItem" type="text/template">
  <li class='row user-item'>
    <a href="<%= profileURL %>" target="_blank">
      <div class="col-xs-1">
        <img class='img-circle' width="35" src="<%= profileImg %>"/>
      </div>
      <b class='col-xs-8'>
        <%= name %><br>
        <i><%= streamTitle %></i>
      </b>
      <i class="col-xs-3 glyphicon <%= streamStatus %>"></i>
    </a>
  </li>
</script>

script.js

/*
TODO:
comeback to this code and optimize performance by removing old rendered views
*/
var clientID = 'pbfubrqgf1h2f7mpp71zxxvve4a7lnh',
    user = 'rlynjb08',
    users = 'https://api.twitch.tv/kraken/users/' + user + '/follows/channels?client_id=' + clientID;

var followedUser = Backbone.Model.extend();
var followedUsers = Backbone.Collection.extend({
  model: followedUser,
  url: users
});
// if returns null, means they are not currently streaming
// if data returns status 422 with message, means user removed their account
var isUserStreaming = Backbone.Model.extend({
  url: function() {
    return this.get('url')
  }
});
var isUsersStreaming = Backbone.Collection.extend({
  model: isUserStreaming
});

var appTwitchView = Backbone.View.extend({
  el: '#appWrapper',
  template: _.template( $('#appContent').html() ),
  initialize: function() {
    this.$el.html( this.template );
    this.auv = new allUsersWrapperView({ tabFlag: this.tabFlag });
  },
  events: {
    "click label[for]": 'userStatus'
  },
  userStatus: function(e) {
    this.tabFlag = e.currentTarget.htmlFor;
    this.auv.remove();
    this.initialize();
  }
});

var allUsersWrapperView = Backbone.View.extend({
  el: '#allUsersWrapper',
  template: _.template( $('#allUsersContent').html() ),
  collection: new followedUsers,
  initialize: function(options) {
    this.tabFlag = options.tabFlag;
    this.$el.html( this.template );
    
    this.collection.fetch();
    this.listenTo(this.collection, 'sync', this.render);
  },
  render: function() {
    var items = this.collection.toJSON()[0].follows;
    _.each(items, function(model) {
      /*
      * Note: http://stackoverflow.com/questions/21819905/jquery-ajax-calls-in-for-loop
      * http://stackoverflow.com/questions/2405064/ajax-call-in-for-loop-wont-return-values-to-correct-array-positions
      * http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
      */
      var title = model.channel.display_name,
          logo = model.channel.logo,
          url = model.channel.url,
          ajaxCall = 'https://api.twitch.tv/kraken/streams/' + title + '?client_id=' + clientID,
          stream = new isUserStreaming;
      
      stream.set({ url: ajaxCall });
      stream.fetch();
      this.listenTo(stream, 'sync', function(data) {
        var streamStatus = data.toJSON().stream,
            finalData = {
              name: title,
              profileImg: logo,
              profileURL: url,
              streamStatus: (streamStatus === null) ? 'glyphicon-off text-danger' : 'glyphicon-ok text-success',
              streamTitle: (streamStatus !== null) ? data.toJSON().stream.game : ''
            };
        var f = new allUsersView({ model: finalData, tabFlag: this.tabFlag });
      });
    }, this);
  }
});

var allUsersView = Backbone.View.extend({
  el: '#allUsersList',
  template: _.template( $('#userItem').html() ),
  initialize: function(options) {
    this.filter = options.tabFlag;
    this.render();
  },
  render: function() {
    if ( this.filter === undefined || this.filter === 'tab1' ) {
      this.$el.append( this.template( this.model ) );
    }
    if ( this.filter === 'tab2' ) {
      if (this.model.streamStatus === 'glyphicon-ok text-success') {
        this.$el.append( this.template( this.model ) );
      }
    }
    if ( this.filter === 'tab3' ) {
      if (this.model.streamStatus === 'glyphicon-off text-danger') {
        this.$el.append( this.template( this.model ) );
      }
    }
  }
});

var au = new appTwitchView();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

style.css

.container
  max-width: 500px
  label
    background: lightgray
    border: 1px solid #fff
  li.user-item
    margin: 15px 0

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Zipline: Use the Twitchtv JSON API.markdown

Zipline: Use the Twitchtv JSON API

A Pen by rlynjb on CodePen.

License.