Todos realization of backbone learning

Recently in Reading Addy Osmani developing backbone.js applications, read the first chestnut Todos, must close the book himself to realize again.
The book used a Backbone.localstorage plug-in, backbone still beginners, do not want to ignore the plug-in, first with the Window.localstorage Direct original processing, after studying the plug-in.

Model section

Todo.js

varApp = App | |{};app. Todo=Backbone.Model.extend ({defaults: {content:‘‘, Completed:false    },
    //toggle Completion status toggle:function(bool) {if(bool = = =true) {             This. Set (' Completed ',true); } Else if(bool = = =false) {             This. Set (' Completed ',false); } Else {             This. Set (' Completed ',! This. Get (' Completed ')); }    }});

Collection part

Todos.js

varApp = App | | {};(function () {    varToDoList =Backbone.Collection.extend ({Model:app. Todo
        //window.localstorage storage:window.localStorage||NULL, Initialize:function() {             This. On (' All ', This. Updatestorage); }, Remaining:function () {            return  This. Filter (function(Todo) {returnTodo.get (' completed ') = = =false;        }); }, Completed:function () {            return  This. where ({completed:true}); },
        //page initialization when loaded, using the Reset method to put all the model at once, will trigger the collection reset event readstorage:function() {            if(! This. Storage)return; varTodo_json = This. Storage.getitem (' Todo '); if(Todo_json) This. Reset (Json.parse (Todo_json)); },
        Update storage data for any changes
Json.stringify, if the converted object has the Tojson () method, the return value of Tojson () is converted instead of the current object, and the model's Tojson () returns its Attriubutes property, collection Tojson ( ), returns an array of attributes objects containing all the internal model Updatestorage:function() {            if(! This. Storage)return; varTodo_json = Json.stringify ( This);  This. Storage.setitem (' Todo ', Todo_json);    }    }); App.todos=Newtodolist ();}) ();

View section

Item-view.js, control every LI in ul

varApp = App | |{};app. Todoview=Backbone.View.extend ({tagName:' Li ', Template: _.template ($ (' #item-tpl '). HTML ()),
    //No keypress, non-character key does not trigger keypress and cannot catch Esc key. KeyDown returns the code of the keyboard, KeyPress is to translate the KeyDown return value into ASCII code events: {' DblClick label ': ' Edit ',        ' Click. Toggle ': ' Toggle ',        ' Blur. Edit ': ' Close ',        ' KeyDown. Edit ': ' Updateonenter ',   ' Click. Clear ': ' Clear '}, Initialize:function() {         This. Listento ( This. Model, ' change ', This. Render);  This. Listento ( This. Model, ' destroy ', This. Remove); }, Render:function() {         This. $el. HTML ( This. Template ( This. Model.tojson ()));  This. $el. Toggleclass (' Completed ', This. Model.get (' Completed '));  This. $edit = This. $ ('. Edit '); return  This; }, Edit:function() {         This. $el. addclass (' editing ');  This. $edit. focus ();  This. $edit. Select (); }, Close:function() {        varValue = This. $edit. Val (); if(Value.trim ()) { This. Model.set (' content ', value); } Else {             This. Clear (); }         This. $el. Removeclass (' editing '); }, Updateonenter:function(e) {if(E.which = = =Enter_key) {             This. Close (); } Else if(E.which = = =Esc_key) {             This. $el. Removeclass (' editing ');  This. $edit. Val ( This. Model.get (' content ')); }}, clear:function() {         This. Model.destroy (); }, Toggle:function() {         This. Model.toggle (); }});

App-view.js

varApp = App | |{};app. Appview=Backbone.View.extend ({el:' #todo-app ', Template: _.template ($ (' #footer-tpl '). HTML ()), events: {' KeyDown #new-todo ': ' Createonenter ',        ' Click #toggle-all ': ' Toggleall ',        ' Click. clear-completed ': ' clearcompleted '}, Initialize:function () {         This. $list = This. $ (' #todo-list ');  This.$New= This. $ (' #new-todo ');  This. Allcheckbox = This. $ (' #toggle-all ') [0];  This. $main = This. $ (' #todo-main ');  This. $footer = This. $ (' #todo-footer ');  This. Listento (App.todos, ' Add ', This. AddOne);  This. Listento (App.todos, ' all ', This. Render);  This. Listento (App.todos, ' Reset ', This. AddAll);    App.todos.readStorage (); }, Render:function () {        varRemaining =app.todos.remaining (). length, completed=app.todos.completed (). length;  This. $footer. HTML ( This. Template ({remaining:remaining, completed:completed});  This. $clearCompleted = This. $ ('. clear-completed '));  This. allcheckbox.checked =!remaining; if(app.todos.length) { This. $main. Show ();  This. $footer. Show (); } Else {             This. $main. Hide ();  This. $footer. Hide (); }        return  This; }, Newattributes:function () {        return{content: This.$New. Val (), Completed:false}}, AddOne:function(Todo) {varView =Newapp.        Todoview ({Model:todo});  This. $list. Append (View.render (). EL); }, AddAll:function(Todos) {Todos.each (function(Todo) { This. AddOne (TODO); },  This); }, Createonenter:function(e) {if(E.which = = = Enter_key && This.$New. val (). Trim ()! = "") {App.todos.add ( This. Newattributes ());  This.$New. Val ('); }}, clearcompleted:function() {app.todos.completed (). ForEach (function(Todo) {Todo.destroy ();    }); }, Toggleall:function () {        varValue = This. allcheckbox.checked; App.todos.forEach (function(Todo) {todo.toggle (value); },  This); }});

Finally, Index.js

var Enter_key =    +, = +,    = App | | {};$ (function() {    new  app. Appview ();});

Todos realization of backbone learning