Fork Join Demo

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<script src="https://raw.github.com/insin/DOMBuilder/master/dist/DOMBuilder.dom.min.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/v1.4.0/jquery.mockjax.js"></script>
<script src="https://raw.github.com/ifandelse/infuser/master/lib/combined/infuser_all.min.js"></script>
<script src="https://raw.github.com/arobson/cartographer.js/master/lib/cartographer.js"></script>
<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/master/docs/assets/css/bootstrap.css">
<div id="placeholder">
</div>

<div id="profile-template" class="container" hidden>
  <div class="row">
    <img data-id="profile_image_url" class="span3">
    <div class="span6">
      <h1 data-id="name"></h1>
      <div data-id="description"></div>
    </div>
  </div>
  <div class="row">
    <div class="span">
      <h3>GitHub Profile</h3>
      <label>Link:
        <a data-id="html_url"></a>
      </label>
      <div>
        <label>Public Repos: </label><span data-id="public_repos"></span></div>
      <div>
        <label>Followers: </label><span data-id="followers"></span></div>
      <div>
        <label>Following: </label><span data-id="following"></span></div>
    </div>
    <div class="span">
      <h3>Twitter Profile</h3>
      <label>Link:
        <a data-id="url"></a>
      </label>
      <div>
        <label>Tweets: </label><span data-id="statuses_count"></span></div>
      <div>
        <label>Followers: </label><span data-id="followers_count"></span></div>
      <div>
        <label>Following: </label><span data-id="friends_count"></span></div>
    </div>
  </div>
</div>

CSS

body {
  font-family: helvetica;
  font-size: 1em;
}

img {
  width: 200px;
}

.row {
  margin-left: -20px;
  *zoom: 1;
  padding: 2em;
}

.row:before,
.row:after {
  display: table;
  content: "";
}

.row:after {
  clear: both;
}

[class*="span"] {
  float: left;
  margin-left: 20px;
}

JavaScript

var gitHubProfileSnippet = {
      "name": "Alex Robson",
      "company": "appendTo",
      "public_repos": 31,
      "followers": 18,
      "following": 4,
      "html_url": "https://github.com/arobson"
    };

    var twitterProfileSnippet = {
      "name": "Alex Robson",
      "profile_image_url": "https://twimg0-a.akamaihd.net/profile_images/1621555218/stogie.jpg",
      "url": "http://twitter.com/!#/a_robson",
      "followers_count": 287,
      "description": "Aspiring coder of all the things.",
      "friends_count": 245,
      "statuses_count": 4322,
      "screen_name": "A_Robson"
    };

    // sets up request interceptors with responses to fake.
    $.mockjax({
      url: "http://api.github.com/users/arobson",
      type: "GET",
      status: 200,
      responseText: gitHubProfileSnippet
    });

    $.mockjax({
      url: "https://api.twitter.com/1/users/show.json?screen_name=A_Robson",
      type: "GET",
      status: 200,
      responseText: twitterProfileSnippet
    });

    var forkJoin = function(queue, onComplete) {
      var results = [],
        count = 0,
        i = 0,
        done = function(result) {
          if (result != undefined) {
            results.push(result);
          }
          if (--count === 0) {
            onComplete(results);
          }
        };

      if (queue == undefined || queue.length === 0) {
        onComplete([]);
      } else {
        count = queue.length;
        for (i = 0; i < queue.length; i++) {
          queue[i](done);
        }
      }
    };

    // perform the actual call
    var request = function(url, limit, fallback, onDone) {
      $.ajax({
        url: url,
        timeOut: limit,
        success: function(data) {
          onDone(data);
        },
        error: function() {
          onDone(fallback);
        }
      });
    };

    // create a partial application for the GitHub profile request
    var getGitHubProfile = function(onDone) {
     ...