examples/rotten-tomatoes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="../dug.js"></script>
    <style>
    .container { margin-top:50px; }
    .results .row {
      margin-bottom: 2em;
      padding-bottom: 1em;
      border-bottom: 1px solid #ddd;
    }
    .results .row h4 {
      margin-top: 0px;
    }
    .results .row img {
      width: 100%;
      max-width: 100%;
    }
    </style>
</head>
<body>

  <div class="container">
    <div id="movies" class="results"></div>
  </div>

  <script type="text/template" id="template">
    {{#movies}}
    <div class="row">
      <div class="col-xs-2 col-sm-2 col-lg-2">
        <a href="{{links.alternate}}"><img src=
          "{{posters.detailed}}"></a>
      </div>
      <div class="col-xs-10 col-sm-10 col-lg-10">
        <h4><a href="{{links.alternate}}">{{title}}</a></h4>
        <p class="date rating"><strong>MPAA Rating:</strong> {{mpaa_rating}} |
        <strong>Release Date:</strong> {{year}}</p>
        <p>{{synopsis}} &raquo; <a href=
          "{{links.alternate}}">learn more</a></p>
      </div>
    </div>
    {{/movies}}
  </script>

  <script>
    var query = 'bruce lee';
    dug({
      endpoint: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=xpa2duvnsntzytwnbjjm6jck&q='+query,
      template: '#template',
      target: 'movies'
    });
  </script>

</body>
</html>