Skip to content

Instantly share code, notes, and snippets.

@revskill10
Forked from jondot/app.coffee
Created October 9, 2012 23:50
Show Gist options
  • Save revskill10/3862223 to your computer and use it in GitHub Desktop.
Save revskill10/3862223 to your computer and use it in GitHub Desktop.
image-gallery
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()
<!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>
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