Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Backbone presentation demo
var Flowers = Backbone.Collection.extend({
url: "/posts"
})
var flowers = new Flowers;
var Plant = Backbone.Model.extend({
defaults: {
name: "rose",
intro: "I can't walk"
},
selfIntroduction: function(){
console.log("Kind Of Plant");
}
});
var Flower = Plant.extend({
validate: function(attrs){
if (attrs.name == "") return "Even alert sucks. but no name is worse..";
}
});
var Tree = Plant.extend({
selfIntroduction: function(){
console.log("Kind Of Tree");
}
});
var FlowerV = Backbone.View.extend({
tagName: "li",
className: "a-flower",
initialize: function(){
this.model.bind('change', this.render, this);
},
events: {
"click .cut-flower": function(){
console.log("cut a flower");
this.remove();
},
"click .back2origin": function(){
console.log("fetch from server");
this.model.fetch();
},
"click .save-flower": "saveFlower",
"dblclick h2": "editName",
"blur input": "updateName"
},
render: function(){
console.log("render a flower");
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
var template = _.template($("#flower-template").html());
this.options.field.append(this.$el.html(template({
intro: this.model.get("intro"),
name: this.model.get("name")
})));
return this;
},
editName: function(){
this.$("h2").hide();
this.$("input").show();
this.$("input").focus();
},
updateName: function(){
this.model.set({ name: this.$("input").val() });
this.$("h2").show();
this.$("input").hide();
},
saveFlower: function(){
this.model.save({
title: this.model.get("name"),
content: this.model.get("intro")
},
{ success: function(){
console.log("flower saved");
}});
}
});
var Garden = Backbone.View.extend({
events: {
"click #add-flower": "addFlower"
},
render: function(){
console.log("render garden");
this.$el.append("<h1>Garden</h1>");
return this;
},
addFlower: function(){
var flower = new Flower;
flowers.push(flower);
var flowerV = new FlowerV({
model: flower,
field: $(".flowers")
});
flowerV.render();
},
addFlowersFromDb: function(flowersFromDb){
$.each(flowersFromDb, function(i,n){
var flower = new Flower({id: n["id"], name: n["title"], intro: n["content"]});
flower.on("error", function(model, msg){
alert(msg);
});
flowers.add(flower);
var flowerV = new FlowerV({
model: flower,
field: $(".flowers")
});
flowerV.render();
});
}
});
var Router = Backbone.Router.extend({
routes: {
"help": "help", // localhost:3000#help
"home": "home",
"model/inheritable": "modelInheritableDemo"
},
help: function(){
$.get("/backbone_help", function(data){
$("article").hide();
$("#demoAppPage2 div").html(data);
$("#demoAppPage2").show();
$("#anchor").attr("href", "#home");
});
},
home: function(){
$("article").hide();
$("#demoApp").show();
$("#anchor").attr("href", "#help");
},
modelInheritableDemo: function(){
$("article").hide();
$("#model-inheritable").show();
}
});
<div>
<ul class="list">
<li><a id="anchor" href="#help">Another Page</a></li>
<li><a href="#model/inheritable">Model Inheritable</a></li>
</ul>
<div class="clear"></div>
</div>
<article id="demoApp">
<h1>Backbone.js</h1>
<div id="garden" class='center'>
<div>
<a id='add-flower' href="javascript: ;">Add a flower</a>
</div>
<ul class="flowers" id="flower">
</ul>
<div class="clear"></div>
</div>
<div id="console"></div>
<div id="gardenDB"></div>
</article>
<article id="demoAppPage2" class='hidden'>
<div class='center'></div>
</article>
<article id="model-inheritable" class='hidden'>
<div class='center'>
<pre>
var Plant = Backbone.Model.extend({
defaults: {
name: "rose",
intro: "I can't walk"
},
selfIntroduction: function(){
console.log("Kind Of Plant");
}
});
var Tree = Plant.extend({
defaults: {
extra: "No name and intro inherited"
},
selfIntroduction: function(){
console.log("Kind Of Tree");
}
});
</pre>
</div>
</article>
<script type="text/javascript">
$(function(){
var garden = new Garden({el: $("#garden")});
garden.addFlowersFromDb(<%= @posts.to_json.html_safe %>);
garden.render();
var route = new Router();
Backbone.history.start();
});
</script>
<script type="text/template" id="flower-template">
<h2>{{name}}</h2>
<input type="text" class="hidden"></input>
<span>"{{intro}}"</span>
<a class='cut-flower' href="javascript: ;">Cut it</a>
<a class='save-flower' href="javascript: ;">Save it</a>
</script>
<style type="text/css">
.center {
border: 1px solid #CCC;
width: 800px;
min-height: 200px;
margin: 0 auto;
}
.flowers, .trees {
float: left;
margin-left: 10px;
width: 300px;
display: block;
}
.clear {
clear: both;
}
.a-flower {
padding: 5px;
border: 1px solid HotPink;
margin-top: 5px;
}
.a-flower span {
display: block;
}
.a-tree {
border: 1px solid LawnGreen;
}
.hidden {
display: none;
}
.list li{
float: left;
margin: 10px;
list-style: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment