-
-
Save touhonoob/2517041 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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment