Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Load template async

  • Loading branch information...
commit 86133d1eabf3981ff480a0e4e137e4e84c06d776 1 parent 2d2af6f
@hubgit authored
Showing with 52 additions and 49 deletions.
  1. +0 −24 index.html
  2. +30 −22 js/app.js
  3. +21 −0 resources/Movie.html
  4. +1 −3 resources/Movie.js
View
24 index.html
@@ -23,30 +23,6 @@
<div id="movies" class="wrapper"></div>
- <script type="text/html" data-template="movie">
- <div>
- <a property="name" href="{{links.alternate}}">{{title}}</a>
- </div>
-
- {{#year}}<div property="datePublished">{{year}}</div>{{/year}}
-
- <div>
- {{#abridged_directors}}<span property="director">{{name}}</span>{{/abridged_directors}}
- </div>
-
- <a property="url" href="{{links.alternate}}"><img property="thumbnailUrl" src="{{posters.detailed}}"></a>
-
- <div property="productionCompany">{{studio}}</div>
-
- <footer>
- <a class="service" data-service="google" href="http://www.google.co.uk/movies?q={{title}}"></a>
- {{#alternate_ids}}
- {{#imdb}}<a class="service" data-service="imdb" href="http://www.imdb.com/title/tt{{imdb}}"></a>{{/imdb}}
- {{#imdb}}<a class="service" data-service="letterboxd" href="http://letterboxd.com/imdb/tt{{imdb}}"></a>{{/imdb}}
- {{/alternate_ids}}
- </footer>
- </script>​
-
<script src="js/jquery.js"></script>
<script src="js/mustache.js"></script>
<script src="js/underscore.js"></script>
View
52 js/app.js
@@ -1,3 +1,5 @@
+var Templates = {};
+
$(function() {
var tomatoes = new RottenTomatoes({ apikey: "bsmgb5axsjekh4jbwqyt38ak" });
@@ -8,36 +10,42 @@ $(function() {
});
var augment = function(movie) {
- // fetch full data for individual movies
- tomatoes.get(movie.get("links").self, {}, function(data) {
- if (data) movie.set(data);
- });
+ // fetch full data for individual movies
+ tomatoes.get(movie.get("links").self, {}, function(data) {
+ if (data) movie.set(data);
+ });
};
var init = function() {
- // listen for changes to the selected type of listing
- $(window).bind("hashchange", init);
+ // empty the view
+ $("#movies").empty();
- // empty the view
- $("#movies").empty();
+ // get the selected type of listing from the location hash
+ var type = location.hash.replace("#", "") || "in_theaters";
- // get the selected type of listing from the location hash
- var type = location.hash.replace("#", "") || "in_theaters";
+ // set the active item in the nav bar
+ $("nav a").removeClass("active").filter("[href='#" + type + "']").addClass("active");
- // set the active item in the nav bar
- $("nav a").removeClass("active").filter("[href='#" + type + "']").addClass("active");
+ // fetch the list of items and display them
+ tomatoes.list(type, function(data) {
+ var collection = new Movies(data.movies);
+ var view = new MoviesView({ collection: collection });
- // fetch the list of items and display them
- tomatoes.list(type, function(data) {
- var collection = new Movies(data.movies);
- var view = new MoviesView({ collection: collection });
+ // augment each item with extra information
+ collection.each(augment);
+ });
- // augment each item with extra information
- collection.each(augment);
- });
+ // TODO: pagination
+ };
- // TODO: pagination
-}
+ $.ajax({
+ url: "resources/Movie.html",
+ dataType: "text",
+ }).then(function(data) {
+ Templates.Movie = data;
+ init();
+ });
-init();
+ // listen for changes to the selected type of listing
+ $(window).bind("hashchange", init);
});
View
21 resources/Movie.html
@@ -0,0 +1,21 @@
+<div>
+ <a property="name" href="{{links.alternate}}">{{title}}</a>
+</div>
+
+{{#year}}<div property="datePublished">{{year}}</div>{{/year}}
+
+<div>
+ {{#abridged_directors}}<span property="director">{{name}}</span>{{/abridged_directors}}
+</div>
+
+<a property="url" href="{{links.alternate}}"><img property="thumbnailUrl" src="{{posters.detailed}}"></a>
+
+<div property="productionCompany">{{studio}}</div>
+
+<footer>
+ <a class="service" data-service="google" href="http://www.google.co.uk/movies?q={{title}}"></a>
+ {{#alternate_ids}}
+ {{#imdb}}<a class="service" data-service="imdb" href="http://www.imdb.com/title/tt{{imdb}}"></a>{{/imdb}}
+ {{#imdb}}<a class="service" data-service="letterboxd" href="http://letterboxd.com/imdb/tt{{imdb}}"></a>{{/imdb}}
+ {{/alternate_ids}}
+</footer>
View
4 resources/Movie.js
@@ -1,8 +1,6 @@
var Movie = Backbone.Model.extend({});
var MovieView = Backbone.View.extend({
- template: $("[data-template='movie']").html(),
-
tagName: "article",
attributes: {
@@ -15,7 +13,7 @@ var MovieView = Backbone.View.extend({
},
render: function() {
- this.$el.html(Mustache.render(this.template, this.model.toJSON()));
+ this.$el.html(Mustache.render(Templates.Movie, this.model.toJSON()));
return this;
}
});
Please sign in to comment.
Something went wrong with that request. Please try again.