JSFiddle - React, Tailwind, and code Playground

by burkeholland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-static-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand">
        <img class="logo" src="http://images.rottentomatoescdn.com/images/trademark/flixster-logo.png" /> 
        Search
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="http://www.rottentomatoes.com">Rotten Tomatoes</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="main">
  <div class="container">
    <div class="row">
      <div class="span4">
        <h3>Search</h3>
        <div class="form-search">
          <div class="input-prepend">
            <button data-bind="click: search" class="btn">Search</button>
            <input type="text" required data-bind="value: term" class="span2 search-query" name="term">
          </div>
        </div>
      </div>
      <div class="span8">
        <h3 data-bind="html: title"></h3>
        <div id="results" data-bind="visible: hasResults">
          <div data-role="pager" data-bind="source: results" id="pager" data-auto-bind="false"></div>
          <div class="results row" data-selectable="true" data-pager="pager" data-auto-bind="false" data-scrolling="virtual" data-role="listview" data-bind="source: results" data-template="template"></div>
          <div data-role="pager" data-bind="source: results" id="pager" data-auto-bind="false"></div>  
 ...

CSS

body {
  font-size: 14px;
}

.results {
  margin: 10px 0;
  padding: 10px;
}
.results .k-widget {
  border-style: none;
}
.result {
  margin: 20px;
}
.result > :first-child {
  float: left;
  margin-right: 10px;
}
.poster {
  width: 100px;
  height: 149px;
}

.details {
  margin-left: 110px;
}

.title {
  font-weight: bold;
  font-size: 1.2em;
}

.logo {
  height: 25px;
  width: 88px;
  margin-top: -10px;
}

JavaScript

(function ($) {

  var flixter = "http://api.rottentomatoes.com/api/public/v1.0/movies.jsonp?apikey=2w6rma75ygrbrnubvu7g5asc";

  var viewModel = kendo.observable({
    title: "Search Results",
    term: null,
    results: new kendo.data.DataSource({
      transport: {
        read: {
          url: flixter,
          dataType: "jsonp"
        },
        parameterMap: function(options, operation) {
          if (operation === "read") {
            return {
              q: viewModel.get("term"),
              page_limit: 10,
              page: options.page
            }
          }
        }
      },
      schema: {
        data: "movies",
        total: "total"
      },
      change: function() {
        viewModel.set("title", "Search Results For '" + viewModel.get("term") + "'");
        viewModel.set("hasResults", this.view().length > 0);
      },
      serverPaging: true,
      pageSize: 10
    }),
    search: function(e) {
        this.get("results").read();
    },
    hasResults: false       
  });
  
  kendo.bind(document.body, viewModel);

}(jQuery));