Permalink
Browse files

new amazing API

  • Loading branch information...
maccman committed Mar 22, 2011
1 parent 272acfa commit f08b08fa7008bc84d224ff904b291c102149ef21
Showing with 753 additions and 124 deletions.
  1. +1 −0 README.md
  2. +85 −48 app/application.js
  3. +1 −0 css/application.css
  4. +2 −1 index.html
  5. +13 −0 lib/jquery.tmpl.js
  6. +481 −0 lib/json2.js
  7. +110 −71 lib/spine.js
  8. +56 −0 lib/spine.model.ajax.js
  9. +4 −4 lib/spine.model.local.js
View
@@ -0,0 +1 @@
+Model
View
@@ -1,59 +1,95 @@
-(function($, Spine){
+jQuery(function($){
- var con = Spine.Controller.create()
-
- con.sel = "#tasks";
+ window.TaskController = Spine.Controller.create({
+ tag: "li",
- con.events = {
- "change .item input[type=checkbox]": "toggle",
- "click .item .destroy": "destroy",
- "dblclick .item .view": "edit",
- "keypress .item input[type=text]": "closeEdit",
+ events: {
+ "change input[type=checkbox]": "toggle",
+ "click .destroy": "destroy",
+ "dblclick .view": "edit",
+ "keypress input[type=text]": "blurOnEnter",
+ "blur input[type=text]": "close"
+ },
+
+ elements: {
+ "input[type=text]": "input",
+ ".item": "wrapper"
+ },
+
+ init: function(){
+ this.proxyAll("render", "remove");
+ this.item.bind("update", this.render);
+ this.item.bind("destroy", this.remove);
+ },
- "submit form": "create",
- "click .clear": "clear",
- "render .items": "renderCount"
- };
-
- con.elements = {
- ".items": "tasks",
- ".countVal": "count",
- "form input": "input"
- };
-
- con.include({
render: function(){
- this.tasks.link(Task, function(){
- var elements = $("#taskTemplate").tmpl(Task.all());
-
- $(this).empty();
- $(this).append(elements);
- });
- this.tasks.render();
+ var elements = $("#taskTemplate").tmpl(this.item);
+ this.el.html(elements);
+ this.refreshElements();
+ return this;
+ },
+
+ toggle: function(){
+ this.item.done = !this.item.done;
+ this.item.save();
},
- toggle: function(e){
- var task = $(e.target).item();
- task.done = !task.done;
- task.save();
+ destroy: function(){
+ this.item.destroy();
},
- destroy: function(e){
- $(e.target).item().destroy();
+ edit: function(){
+ this.wrapper.addClass("editing");
+ this.input.focus();
},
- edit: function(e){
- var item = $(e.target).parents(".item");
- item.addClass("editing");
- item.find("input").focus();
+ blurOnEnter: function(e) {
+ if (e.keyCode == 13) e.target.blur();
},
- closeEdit: function(e){
- if ( e.keyCode != 13 ) return;
- $(e.target).parents(".item").removeClass("editing");
- $(e.target).item().updateAttributes({name: $(e.target).val()});
+ close: function(e){
+ this.wrapper.removeClass("editing");
+ this.item.updateAttributes({name: this.input.val()});
},
+ remove: function(){
+ this.el.remove();
+ }
+ });
+
+ window.AppController = Spine.Controller.create({
+ el: $("#tasks"),
+
+ events: {
+ "submit form": "create",
+ "click .clear": "clear",
+ "render .items": "renderCount"
+ },
+
+ elements: {
+ ".items": "items",
+ ".countVal": "count",
+ ".clear": "clear",
+ "form input": "input"
+ },
+
+ init: function(){
+ this.proxyAll("addOne", "addAll", "renderCount");
+ Task.bind("create", this.addOne);
+ Task.bind("refresh", this.addAll);
+ Task.bind("refresh change", this.renderCount);
+ Task.fetch();
+ },
+
+ addOne: function(e, task) {
+ var view = TaskController.inst({item: task || e});
+ this.items.append(view.render().el);
+ },
+
+ addAll: function() {
+ Task.each(this.addOne);
+ },
+
create: function(e){
Task.create({name: this.input.val()});
this.input.val("");
@@ -65,12 +101,13 @@
},
renderCount: function(){
- this.count.text(Task.active().length);
+ var active = Task.active().length;
+ this.count.text(active);
+
+ var inactive = Task.done().length;
+ this.clear[inactive ? "show" : "hide"]();
}
});
- $(function(){
- con.inst();
- });
-
-})(jQuery, Spine);
+ window.App = AppController.inst();
+});
View
@@ -60,6 +60,7 @@ body {
#tasks .items {
margin: 10px 0;
+ list-style: none;
}
#tasks .item {
View
@@ -3,6 +3,7 @@
<head>
<link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8">
+ <script src="lib/json2.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.link.js" type="text/javascript" charset="utf-8"></script>
@@ -15,7 +16,7 @@
<script type="text/x-jquery-tmpl" id="taskTemplate">
<div class="item {{if done}}done{{/if}}">
- <div class="view">
+ <div class="view" title="Double click to edit...">
<input type="checkbox" {{if done}}checked="checked"{{/if}}>
<span>${name}</span> <a class="destroy"></a>
</div>
View
@@ -84,6 +84,10 @@
tmplItem: function() {
return jQuery.tmplItem( this[0] );
},
+
+ tmplElement: function() {
+ return jQuery.tmplElement( this[0] );
+ },
// Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
template: function( name ) {
@@ -165,6 +169,15 @@
while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
return tmplItem || topTmplItem;
},
+
+ tmplElement: function( elem ) {
+ var tmplItem;
+ if ( elem instanceof jQuery ) {
+ elem = elem[0];
+ }
+ while ( elem && elem.nodeType === 1 && !jQuery.data( elem, "tmplItem" ) && (elem = elem.parentNode) ) {}
+ return elem;
+ },
// Set:
// Use $.template( name, tmpl ) to cache a named template,
Oops, something went wrong.

0 comments on commit f08b08f

Please sign in to comment.