Created
August 23, 2011 09:57
-
-
Save jondot/1164768 to your computer and use it in GitHub Desktop.
image-gallery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Thumb extends Backbone.Model | |
| defaults: | |
| uri: '' | |
| state: '' | |
| select: (state) -> | |
| st = '' | |
| st = 'selected' if state | |
| @set('state' : st) | |
| class Thumbs extends Backbone.Collection | |
| model: Thumb | |
| fetch: -> | |
| _.map(urls, (url)-> new Thumb(uri: url)) | |
| select: (model) -> | |
| @selected.select(false) if @selected? | |
| @selected = model | |
| @selected.select(true) | |
| @trigger('thumbs:selected') | |
| selectedThumb: ()-> | |
| @selected | |
| class FrontView extends Backbone.View | |
| template: _.template('<img src="<%= uri %>" />') | |
| el: $('#front') | |
| initialize: ()-> | |
| @model.bind('thumbs:selected', @render) | |
| render: ()=> | |
| @el.html(@template(@model.selectedThumb().toJSON())) | |
| @ # important to give 'this' out, on rendering we'll access 'el' | |
| thumbs = new Thumbs | |
| frontview = new FrontView(model:thumbs) | |
| class ThumbView extends Backbone.View | |
| tagName: 'li' | |
| template: _.template('<img src="<%= uri %>" class="<%= state %>" />') | |
| events: | |
| "click" : "selectThumb" | |
| initialize: ()-> | |
| @model.bind('change', @render) | |
| render: ()=> | |
| $(@.el).html(@template(@model.toJSON())) | |
| @ | |
| selectThumb: ()-> | |
| thumbs.select(@model) | |
| class AppView extends Backbone.View | |
| el: $("container") | |
| render: ()-> | |
| _.each thumbs.fetch(), (t)-> | |
| $('div ul').append( new ThumbView(model: t).render().el) | |
| window.App = new AppView | |
| window.App.render() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="public/javascripts/underscore.js"></script> | |
| <script type="text/javascript" src="public/javascripts/jquery-1.6.2.min.js"></script> | |
| <script type="text/javascript" src="public/javascripts/backbone.js"></script> | |
| <script type="text/javascript" src="public/javascripts/json2.js"></script> | |
| <style type="text/css"> | |
| li img { width: 100px; height:100px; cursor:pointer;} | |
| li { float:left;} | |
| img.selected{ border:1px solid black;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="front"> | |
| </div> | |
| <div> | |
| <ul> | |
| </ul> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var urls = [ | |
| 'http://farm7.static.flickr.com/6089/6059010802_436cefa521_z.jpg', | |
| 'http://farm7.static.flickr.com/6088/6065742147_3d62b32deb_z.jpg', | |
| 'http://farm7.static.flickr.com/6197/6065590914_ab1acccf87_z.jpg', | |
| 'http://farm7.static.flickr.com/6081/6066708246_e1d9a812ed.jpg', | |
| 'http://farm7.static.flickr.com/6066/6063442584_feb03a88d8.jpg' | |
| ]; | |
| </script> | |
| <script type="text/javascript" src="app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Thumb = Backbone.Model.extend({ | |
| defaults: { | |
| uri: '', | |
| state: '' | |
| }, | |
| select: function(state){ | |
| this.set({'state': state ? 'selected' : ''}); | |
| } | |
| }); | |
| var Thumbs = Backbone.Collection.extend({ | |
| model: Thumb | |
| , | |
| fetch: function(){ | |
| return _.map(urls, function(url){ return new Thumb({uri: url})}); | |
| } | |
| , | |
| select: function(model){ | |
| if( this.selectedThumb() ){ | |
| this.selectedThumb().select(false); | |
| } | |
| this.selected = model; | |
| this.selected.select(true); | |
| this.trigger('thumbs:selected'); | |
| } | |
| , | |
| selectedThumb: function(){ | |
| return this.selected; | |
| } | |
| }); | |
| var thumbs = new Thumbs(); | |
| var FrontView = Backbone.View.extend({ | |
| template: _.template('<img src="<%= uri %>" />'), | |
| el: $('#front'), | |
| initialize: function(){ | |
| this.model.bind('thumbs:selected', this.render, this); | |
| }, | |
| render: function(){ | |
| this.el.html(this.template(this.model.selectedThumb().toJSON())); | |
| } | |
| }); | |
| var frontview = new FrontView({model:thumbs}); | |
| var ThumbView = Backbone.View.extend({ | |
| tagName: 'li', | |
| template: _.template('<img src="<%= uri %>" class="<%= state %>" />'), | |
| events: { | |
| "click" : "selectThumb" | |
| }, | |
| initialize: function(){ | |
| this.model.bind('change', this.render, this); | |
| }, | |
| render: function(){ | |
| console.log('rendering'); | |
| $(this.el).html(this.template(this.model.toJSON())); | |
| return this; | |
| }, | |
| selectThumb: function(){ | |
| thumbs.select(this.model); | |
| } | |
| }); | |
| var AppView = Backbone.View.extend({ | |
| el: $("#container"), | |
| render: function(){ | |
| _.each(new Thumbs().fetch(), | |
| function(t){ | |
| $('div ul').append( new ThumbView({model: t}).render().el) | |
| }); | |
| } | |
| }); | |
| window.App = new AppView(); | |
| window.App.render(); |
excellent!, thanks
You have an error in your HTML, you're not closing off div#container. And on line 37 of the JavaScript you're missing parenthesis it should be var thumbs = new Thumbs();
Thanks!
plz fix lin 52 to $(this.el).html(this.template(this.model.selectedThumb().toJSON()));
Updating line 52 in js.app fixes it for me too-- not using coffeescript but it looks like it ought to produce what brewing provides as the fix.
Here's the updated gist https://gist.github.com/mlncn/5529698
Very nice work! Thanks for sharing.
Just a short one:
Line 38 requires should be
$(@el).html(@template(@model.selectedThumb().toJSON()))
to prevent: Uncaught TypeError: Object #<HTMLDivElement> has no method 'html'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You could remove the @ attribute in the end of the bind method with coffeescript if you use the "fat arrow"