Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 13, 2015 16:57
Show Gist options
  • Save anonymous/54c180c76ed9fc3d0ba6 to your computer and use it in GitHub Desktop.
Save anonymous/54c180c76ed9fc3d0ba6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/fofajowava
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.region {
width: 50%;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 30px;
}
</style>
</head>
<body>
<div id="container">
<div id="masters" class="region"></div>
<div id="detail" class="region"></div>
</div>
<script id="jsbin-javascript">
// App
var App = App || {};
App.eventBus = _.extend({}, Backbone.Events);
// Models
App.Master = Backbone.Model.extend();
App.Masters = Backbone.Collection.extend({
Model: App.Master
});
// Views
App.MasterView = Backbone.View.extend({
events: {
"click": "onClick"
},
onClick: function(){
App.eventBus.trigger("master:select", this.model);
},
render: function(){
this.$el.html("<a href='#'>" + this.model.get("name") + "</a>");
return this;
}
});
App.MastersView = Backbone.View.extend({
render: function(){
var self = this;
_.each(this.collection, function(p){
var masterView = new App.MasterView({ model: p });
self.$el.append(masterView.render().$el);
});
return this;
}
});
App.DetailView = Backbone.View.extend({
initialize: function(){
App.eventBus.on("master:select", this.onMasterSelected, this);
},
onMasterSelected: function(master){
this.model = master;
this.render();
},
render: function(){
if (!this.model) {
this.$el.html("Please select an item from the master list.");
} else {
this.$el.html(this.model.get("name"));
}
return this;
}
});
$(document).ready(function(){
var masters = [
new App.Master({ name: "Master 1" }),
new App.Master({ name: "Master 2" })
];
var mastersView = new App.MastersView({ collection: masters });
$("#masters").html(mastersView.render().$el);
var detailView = new App.DetailView();
$("#detail").html(detailView.render().$el);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"><\/script>
<script src="//jashkenas.github.io/backbone/backbone-min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="masters" class="region"></div>
<div id="detail" class="region"></div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.region {
width: 50%;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 30px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// App
var App = App || {};
App.eventBus = _.extend({}, Backbone.Events);
// Models
App.Master = Backbone.Model.extend();
App.Masters = Backbone.Collection.extend({
Model: App.Master
});
// Views
App.MasterView = Backbone.View.extend({
events: {
"click": "onClick"
},
onClick: function(){
App.eventBus.trigger("master:select", this.model);
},
render: function(){
this.$el.html("<a href='#'>" + this.model.get("name") + "</a>");
return this;
}
});
App.MastersView = Backbone.View.extend({
render: function(){
var self = this;
_.each(this.collection, function(p){
var masterView = new App.MasterView({ model: p });
self.$el.append(masterView.render().$el);
});
return this;
}
});
App.DetailView = Backbone.View.extend({
initialize: function(){
App.eventBus.on("master:select", this.onMasterSelected, this);
},
onMasterSelected: function(master){
this.model = master;
this.render();
},
render: function(){
if (!this.model) {
this.$el.html("Please select an item from the master list.");
} else {
this.$el.html(this.model.get("name"));
}
return this;
}
});
$(document).ready(function(){
var masters = [
new App.Master({ name: "Master 1" }),
new App.Master({ name: "Master 2" })
];
var mastersView = new App.MastersView({ collection: masters });
$("#masters").html(mastersView.render().$el);
var detailView = new App.DetailView();
$("#detail").html(detailView.render().$el);
});
</script></body>
</html>
Raw
jsbin.fofajowava.css
.region {
width: 50%;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 30px;
}
Raw
jsbin.fofajowava.js
// App
var App = App || {};
App.eventBus = _.extend({}, Backbone.Events);
// Models
App.Master = Backbone.Model.extend();
App.Masters = Backbone.Collection.extend({
Model: App.Master
});
// Views
App.MasterView = Backbone.View.extend({
events: {
"click": "onClick"
},
onClick: function(){
App.eventBus.trigger("master:select", this.model);
},
render: function(){
this.$el.html("<a href='#'>" + this.model.get("name") + "</a>");
return this;
}
});
App.MastersView = Backbone.View.extend({
render: function(){
var self = this;
_.each(this.collection, function(p){
var masterView = new App.MasterView({ model: p });
self.$el.append(masterView.render().$el);
});
return this;
}
});
App.DetailView = Backbone.View.extend({
initialize: function(){
App.eventBus.on("master:select", this.onMasterSelected, this);
},
onMasterSelected: function(master){
this.model = master;
this.render();
},
render: function(){
if (!this.model) {
this.$el.html("Please select an item from the master list.");
} else {
this.$el.html(this.model.get("name"));
}
return this;
}
});
$(document).ready(function(){
var masters = [
new App.Master({ name: "Master 1" }),
new App.Master({ name: "Master 2" })
];
var mastersView = new App.MastersView({ collection: masters });
$("#masters").html(mastersView.render().$el);
var detailView = new App.DetailView();
$("#detail").html(detailView.render().$el);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment