Amplify JS Examples

Amplify JS Examples

by deshpandeakhil

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<input data-bind="value:title" placeholder="Enter Movie Name" type='text' />
<button data-bind="click:getTitles, enable:titleEntered">Get Titles</button>
<br/>
<span data-bind="text:queryText"></span>
<br/>
<br/>
<span data-bind="text:count"></span>
<br/><br/>
<div data-bind="template : {name: 'movieTemplate', foreach:movies}"></div>
<script type="text/html" id="movieTemplate">
  <div class="movie">
    <a data-bind="attr:{href:Url}"><span data-bind="text:Name"></span></a> 
    <p class="synop" data-bind="text:Synopsis"></p>    
  </div>
</script>

CSS

body {
  margin:10px;
}

.synop{
  font-family: Gill Sans, Verdana;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 2px;
}

.movie{
  border-bottom:red 1px solid;
  margin: 0px 0px 10px 0px;
}

JavaScript

$(document).ready(function () {
  var viewModel = function () {
    var title = ko.observable("");
    var movies = ko.observable([]);
    var queryText = ko.observable("");
    var count = ko.observable("");
    var titleEntered = ko.computed(function () {
      return title().length > 0;
    });

    var getTitles = function () {
      movies([]);
      count("");
      // Build OData query
      var movieName = title();

      var query = "http://odata.netflix.com/Catalog/Titles?$filter=substringof('" + escape(movieName) + "',Name)&$callback=callback&$format=json";

      queryText("Query : " + query);

      // Make JSONP call to Netflix
      $.ajax({
        dataType: "jsonp",
        url: query,
        jsonpCallback: "callback",
        success: callback
      });
    };

    var callback = function callback(result) {
      movies(result["d"]["results"]);
      count("Total Count : " + movies.length);
    }

    return {
      getTitles: getTitles,
      titleEntered: titleEntered,
      title: title,
      queryText: queryText,
      count: count,
      movies:movies
    };
  }();
  ko.applyBindings(viewModel);
});