github/backbone
1
1
Fork 0
mirror of https://github.com/jashkenas/backbone.git synced 2026-04-30 03:00:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

Nice improvements to the rendering ... more templates, less javascript.

Browse Source
This commit is contained in:
Jeremy Ashkenas
2010-10-25 15:33:33 -04:00
parent 092131db0a
commit 3a47769a7e
7 changed files with 95 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Rakefile
View File

@@ -9,7 +9,7 @@ end
desc "build the docco documentation"
task :doc do
system "docco backbone.js"
system "docco backbone.js examples/todos/todos.js"
end
desc "run JavaScriptLint on the source"

2
docs/backbone.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>backbone.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <pre><code>(c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
<!DOCTYPE html> <html> <head> <title>backbone.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backbone.html"> backbone.js </a> <a class="source" href="todos.html"> todos.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <pre><code>(c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
Backbone may be freely distributed under the MIT license.
For all details and documentation:
http://documentcloud.github.com/backbone

3
docs/todos.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>todos.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> todos.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Todo</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">Todo</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<!DOCTYPE html> <html> <head> <title>todos.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backbone.html"> backbone.js </a> <a class="source" href="todos.html"> todos.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> todos.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Todo</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">Todo</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">parse</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">resp</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">model</span><span class="p">;</span>
@@ -77,6 +77,7 @@
<span class="nx">changed</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">content</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">updateInput</span><span class="p">.</span><span class="nx">val</span><span class="p">()});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.todo&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;editing&quot;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>

31
examples/todos/index.html
View File

@@ -30,15 +30,7 @@
<ul id="todo-list"></ul>
</div>
<div id="todo-stats">
<span class="todo-count">
<span class="number">0</span>
<span class="word">items</span> left.
</span>
<span class="todo-clear">
<a href="#">Clear completed</a>
</span>
</div>
<div id="todo-stats"></div>
</div>
@@ -55,10 +47,10 @@
<a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
</div>
<script type="text-template" id="item-template">
<script type="text/template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
<div class="display">
<input type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-content"></div>
<span class="todo-destroy"></span>
</div>
@@ -68,6 +60,23 @@
</div>
</script>
<script type="text/template" id="stats-template">
<% if (total) { %>
<span class="todo-count">
<span class="number"><%= remaining %></span>
<span class="word"><%= Todos.pluralize(remaining) %></span> left.
</span>
<% } %>
<% if (done) { %>
<span class="todo-clear">
<a href="#">
Clear <span class="number-done"><%= done %></span>
completed <span class="word-done"><%= Todos.pluralize(done) %></span>
</a>
</span>
<% } %>
</script>
</body>
</html>

14
examples/todos/todos.css
View File

@@ -128,14 +128,14 @@ body {
margin-top: 10px;
}
/* line 56 */
#todo-list .todo {
#todo-list li {
padding: 15px 20px 15px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
#todoapp .content ul#todo-list .todo:after {
#todoapp .content ul#todo-list li:after {
content: "\0020";
display: block;
height: 0;
@@ -144,7 +144,7 @@ body {
visibility: hidden;
}
/* line 62 */
#todo-list .editing {
#todo-list li.editing {
padding: 0;
border-bottom: 0;
}
@@ -157,14 +157,14 @@ body {
}
/* line 65 */
#todoapp .content ul#todo-list .editing input {
width: 466px;
width: 444px;
font-size: 24px;
font-family: inherit;
margin: 0;
line-height: 1.4em;
line-height: 1.6em;
border: 0;
outline: none;
padding: 7px 7px 8px;
padding: 10px 7px 0px 27px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
@@ -215,7 +215,6 @@ body {
}
/* line 102 */
#todoapp .content #todo-stats .todo-count {
display: none;
float: left;
}
/* line 105 */
@@ -226,7 +225,6 @@ body {
/* line 108 */
#todoapp .content #todo-stats .todo-clear {
float: right;
display: none;
}
/* line 111 */
#todoapp .content #todo-stats .todo-clear a {

84
examples/todos/todos.js
View File

@@ -9,6 +9,11 @@ $(function(){
htmlId: function() {
return "todo-" + this.id;
},
remove: function() {
this.destroy();
$(this.view.el).remove();
}
});
@@ -21,7 +26,7 @@ $(function(){
// Returns all done todos.
done: function() {
return this.select(function(todo){
return this.filter(function(todo){
return todo.get('done');
});
},
@@ -37,6 +42,10 @@ $(function(){
parse: function(resp) {
return resp.models;
},
pluralize: function(count) {
return count == 1 ? 'item' : 'items';
}
});
@@ -45,14 +54,14 @@ $(function(){
window.TodoView = Backbone.View.extend({
tagName: "li",
tagName: "li",
template: _.template($('#item-template').html()),
template: _.template($('#item-template').html()),
events: {
"click input[type=checkbox]": "markAsDone",
"click .check" : "toggleDone",
"dblclick div.todo-content" : "edit",
"click span.todo-destroy" : "destroy",
"click span.todo-destroy" : "remove",
"keypress .todo-input" : "changed"
},
@@ -60,6 +69,7 @@ $(function(){
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.el.id = this.model.htmlId();
this.model.view = this;
},
render: function() {
@@ -74,28 +84,23 @@ $(function(){
this.$('.todo-input').val(content);
},
markAsDone: function() {
this.model.save({ done: !this.model.get("done") });
toggleDone: function() {
this.model.save({done: !this.model.get("done")});
},
edit: function() {
this.$('.todo').addClass("editing");
this.updateInput = this.$("input[type=text]");
$(this.el).addClass("editing");
},
changed: function(e) {
if (e.keyCode == 13) {
this.model.save({content: this.updateInput.val()});
this.model.save({content: this.$(".todo-input").val()});
$(this.el).removeClass("editing");
}
},
destroy: function() {
var thisView = this;
this.model.destroy({
success: function(){
$(thisView.el).remove();
}
});
remove: function() {
this.model.remove();
}
});
@@ -104,43 +109,38 @@ $(function(){
el: $("#todoapp"),
template: _.template($('#stats-template').html()),
events: {
"keypress input#new-todo": "createIfEnter",
"keyup input#new-todo": "showTooltip",
"click span.todo-clear": "clearCompleted"
"keypress #new-todo": "createIfEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear a": "clearCompleted"
},
initialize: function() {
_.bindAll(this, 'addTodo', 'clearCompleted', 'showTooltip', 'createIfEnter', 'analyzeTodos');
Todos.bind('add', this.addTodo);
_.bindAll(this, 'addTodo', 'clearCompleted', 'showTooltip', 'createIfEnter', 'render');
this.list = $("#todo-list");
this.newInput = $("#new-todo");
this.tooltip = this.$(".ui-tooltip-top");
Todos.bind('add', this.addTodo);
Todos.bind('all', this.render);
Todos.fetch({
success: _.bind(function(coll) {
_.each(coll.models, this.addTodo);
}, this)
});
this.analyzeTodos();
Todos.bind("add", this.analyzeTodos);
Todos.bind("remove", this.analyzeTodos);
Todos.bind("change", this.analyzeTodos);
},
analyzeTodos: function() {
var doneCount = Todos.done().length;
var todoCount = Todos.length;
var totalCount = todoCount - doneCount;
this.$(".number").text(totalCount);
this.$(".word").text(totalCount == 1 ? 'item' : 'items');
this.$("span.todo-count").css({display: todoCount > 0 ? "inline" : "none"});
this.$("span.todo-clear").css({display: doneCount > 0 ? "inline" : "none"});
render: function() {
var done = Todos.done().length;
this.$('#todo-stats').html(this.template({
done: done,
total: Todos.length,
remaining: Todos.length - done
}));
},
addTodo: function(todo) {
@@ -174,12 +174,8 @@ $(function(){
},
clearCompleted: function() {
thisView = this;
_.each(Todos.done(), function(todo){
todo.destroy({success: function(todo){
thisView.$("#todo-"+todo.id).remove();
}});
});
_.each(Todos.done(), function(todo){ todo.remove(); });
return false;
}
});

53
test/vendor/backbone.localStorage.js vendored
View File

@@ -9,18 +9,18 @@ function guid() {
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
};
Storage.prototype.getObject = function(key) {
return this.getItem(key) && JSON.parse(this.getItem(key));
}
};
var Store = function(name) {
this.name = name;
};
_.extend(Store.prototype, {
create: function(model) {
this.data = localStorage.getObject(this.name);
@@ -29,14 +29,14 @@ _.extend(Store.prototype, {
}
if (!model.id) model.attributes.id = guid();
this.data.push(model);
localStorage.setObject(this.name, this.data);
return {model: model, status: "success"};
},
update: function(model) {
var newData = [];
var succeeded = false;
@@ -50,21 +50,21 @@ _.extend(Store.prototype, {
newData = _.map(this.data, function(i) {
if (i.id == model.id) {
succeeded = true;
return model
return model;
} else {
return i
return i;
}
});
if (!succeeded) {
this.create(model)
this.create(model);
} else {
localStorage.setObject(this.name, newData);
}
return {model: model, status: "success"};
},
find: function(model) {
var record;
@@ -87,17 +87,17 @@ _.extend(Store.prototype, {
return {error: "Record Not Found.", status: "error"};
}
},
findAll: function() {
this.data = localStorage.getObject(this.name);
if (!this.data) {
this.data = [];
}
return {models: this.data, status: "success"};
},
destroy: function(model) {
var newData = [];
var recordKey;
@@ -116,7 +116,7 @@ _.extend(Store.prototype, {
_.breakLoop();
}
});
if (succeeded) this.data.splice(recordKey, 1);
localStorage.setObject(this.name, this.data);
@@ -124,27 +124,24 @@ _.extend(Store.prototype, {
if (succeeded) {
return {model: model, status: "success"};
} else {
return {error: "Record Not Found.", status: "error"}
return {error: "Record Not Found.", status: "error"};
}
}
});
Backbone.sync = function(method, model, success, error) {
var resp;
var store = model.localStore ? model.localStore : model.collection.localStore;
if (method === "read") {
resp = model.id ? store.find(model) : store.findAll();
} else if (method === "create") {
resp = store.create(model);
} else if (method === "update") {
resp = store.update(model);
} else if (method === "delete") {
resp = store.destroy(model);
switch (method) {
case "read": resp = model.id ? store.find(model) : store.findAll(); break;
case "create": resp = store.create(model); break;
case "update": resp = store.update(model); break;
case "delete": resp = store.destroy(model); break;
}
if (resp.status == "success") {
success(resp);
} else if (resp.status == "error" && error) {