Skip to content

Instantly share code, notes, and snippets.

@Siedrix

Siedrix/bower.json

Created July 20, 2014 23:42
Show Gist options
  • Save Siedrix/fc7c3b1b925df3e57f9e to your computer and use it in GitHub Desktop.
Save Siedrix/fc7c3b1b925df3e57f9e to your computer and use it in GitHub Desktop.
Download ZIP
Example of Backbone and React working together
Raw
bower.json
{
"name": "backbone-react-example",
"version": "1.0.0",
"authors": [
"Siedrix <Siedrix@gmail.com>"
],
"description": "backbone react todo list",
"license": "MIT",
"dependencies": {
"backbone": "~1.1.2",
"react": "~0.11.0",
"react.backbone": "~0.4.1",
"jquery": "~2.1.1"
}
}
Raw
index.html
<html>
<head>
</head>
<body>
<h1>Todo list React+Backbone</h1>
<div id="todo-list"></div>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/bower_components/underscore/underscore.js"></script>
<script type="text/javascript" src="/bower_components/backbone/backbone.js"></script>
<script type="text/javascript" src="/bower_components/react/JSXTransformer.js"></script>
<script type="text/javascript" src="/bower_components/react/react.js"></script>
<script type="text/javascript" src="/bower_components/react.backbone/react.backbone.js "></script>
<script type="text/jsx" src="/main.js"></script>
</body>
</html>
Raw
main.js
/** @jsx React.DOM */
var DataLayer = {};
DataLayer.ImageItem = Backbone.Model.extend({
initialize : function(data){
console.log('Creating model', data);
}
});
DataLayer.ImageList = Backbone.Collection.extend({
model : DataLayer.ImageItem,
initialize : function(){
console.log('Creating collection');
}
});
var ImageItemView = React.createBackboneClass({
handleClick: function(event) {
alert( JSON.stringify( this.getModel().toJSON() ) );
},
render: function() {
return <div><img onClick={this.handleClick} src={ this.getModel().get('image') }/></div>
}
});
var ImageListView = React.createBackboneClass({
render: function() {
var imageList = this.getCollection().map(function(item) {
return <ImageItemView model={item} />;
});
return (
<div>
{ imageList }
</div>
);
}
});
window.collections = {};
window.views = {};
var imageList = new DataLayer.ImageList();
window.collections.imageList = imageList;
window.views.todoListView = ImageListView({collection: imageList});
React.renderComponent(window.views.todoListView, document.getElementById('todo-list'));
window.images = ["http://i.imgur.com/Zg9lMsLb.jpg", "http://i.imgur.com/vXdEVo0b.jpg", "http://i.imgur.com/Ji9DUe9b.jpg", "http://i.imgur.com/QUdvV4Xb.jpg", "http://i.imgur.com/1GisN0Hb.jpg", "http://i.imgur.com/PZQKlVqb.jpg", "http://i.imgur.com/z6ArlQlb.jpg", "http://i.imgur.com/6DsXYPwb.jpg", "http://i.imgur.com/aHSIlp9b.jpg", "http://i.imgur.com/rE0I8hab.jpg", "http://i.imgur.com/vbYsBgDb.jpg", "http://i.imgur.com/j8jsVzyb.jpg", "http://i.imgur.com/7g793Ohb.jpg", "http://i.imgur.com/K3A3NKBb.jpg", "http://i.imgur.com/P688G6yb.jpg", "http://i.imgur.com/wEAMD3Jb.jpg", "http://i.imgur.com/MomTy95b.jpg", "http://i.imgur.com/qRjuqesb.jpg", "http://i.imgur.com/mkGVdSUb.jpg", "http://i.imgur.com/uSmtNgdb.jpg", "http://i.imgur.com/cL7ZW19b.jpg", "http://i.imgur.com/I6eThevb.jpg", "http://i.imgur.com/E6C1nS3b.jpg", "http://i.imgur.com/WFOmh6Sb.jpg", "http://i.imgur.com/c9u2M0pb.jpg", "http://i.imgur.com/AXn8mJXb.jpg", "http://i.imgur.com/Dnjjr9Eb.jpg", "http://i.imgur.com/sHFzCXBb.jpg", "http://i.imgur.com/4F0UsVib.jpg", "http://i.imgur.com/FAOVaeRb.jpg", "http://i.imgur.com/1vDIf4yb.jpg", "http://i.imgur.com/dT5daebb.jpg", "http://i.imgur.com/glGo2gqb.jpg", "http://i.imgur.com/n6AB26Fb.jpg", "http://i.imgur.com/swrYc4cb.jpg", "http://i.imgur.com/0J4Zmy1b.jpg", "http://i.imgur.com/TY9oUJcb.jpg", "http://i.imgur.com/lunC0gjb.jpg", "http://i.imgur.com/68NyEYgb.jpg", "http://i.imgur.com/Qm0pdEHb.jpg", "http://i.imgur.com/kgFnZevb.jpg", "http://i.imgur.com/YNwWJOGb.jpg", "http://i.imgur.com/bSjK3jgb.jpg", "http://i.imgur.com/WLn7wb.jpg", "http://i.imgur.com/nN8FjPWb.jpg", "http://i.imgur.com/oLst7Kfb.jpg", "http://i.imgur.com/7QfKzdQb.jpg", "http://i.imgur.com/HkJEtFEb.jpg", "http://i.imgur.com/DXB3qqQb.jpg", "http://i.imgur.com/j4fDmF4b.jpg", "http://i.imgur.com/Bdsgioeb.jpg", "http://i.imgur.com/kBOypofb.jpg", "http://i.imgur.com/xaUcpmnb.jpg", "http://i.imgur.com/h0KLWHPb.jpg", "http://i.imgur.com/NSeMb6Ab.jpg", "http://i.imgur.com/tZceRUQb.jpg", "http://i.imgur.com/2TvJmsbb.jpg", "http://i.imgur.com/WgCVzSKb.jpg", "http://i.imgur.com/GZPXGbVb.jpg", "http://i.imgur.com/P0SOjtib.jpg"];
window.i = 0;
setInterval(function(){
var imgSrc = window.images[window.i % window.images.length];
var $img = $('<img>');
$img.on('load', function(){
window.collections.imageList.unshift({image : imgSrc})
});
$img.attr('src', imgSrc);
window.i++;
}, 1000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment