Backbone䜿ã£ãŠã¿ãã¡ã¢ããŸã ãããŸãããããã£ãŠãªããã ãªãŒã
ããããããªããªãã³ãŒããèªãã°ãããããªãããšããäºã§ãå ¬åŒã§æäŸãããŠããTodoã¢ããªã®ã³ãŒããèªãã§ã¿ãŸããã
ãœãŒã¹
å ¬åŒã®ãµã³ãã«ã
ããããTodo管çããŒã«ãªãã ãã©ãæ å ±ãHTML5ã®LocalStorageã«æã€ããã«ãªã£ãŠãããã€ãŸããã©ãŠã¶ãéããŠãå 容ãèšæ¶ããŠããã
JSãã¡ã€ã«
HTMLããèªã¿èŸŒãã§ããã®ã¯ä»¥äžã
json2.js
jquery-1.7.1.js
underscore-1.3.1.js
backbone.js
backbone-localstorage.js
todos.js
Backbone.jsã¯Underscore.jsãšjQueryãªããZepto.jsãå¿ é ããŸãLocalStorageã䜿ãããã®Backboneæ¡åŒµãèªã¿èŸŒãã§ããã
json2.js
ã¯äœã«äœ¿ã£ãŠããã®ãããããªããã©ããã¶ãLocalStorageã®I/Oã§JSONã®ããŒã¹ãããŠãããšãããªããŸãããŸãæ¬ç·šãšã¯é¢ä¿ãªãã
ã§ãtodo.js
ããã®ã¢ããªã®æ¬äœã
å šäœãèŠæž¡ã
ãŸãã¯è©³çްãªå®è£ ãçç¥ããŠãå€åŽå šäœãèŠãŠã¿ãã
todos.js
// An example Backbone application contributed by // [JïŸïœ©rïŸïœŽme Gravel-Niquet](http://jgn.me/). This demo uses a simple // [LocalStorage adapter](backbone-localstorage.js) // to persist Backbone models within your browser. // Load the application once the DOM is ready, using `jQuery.ready`: $(function(){ // Todo Model // ---------- // Our basic **Todo** model has `title`, `order`, and `done` attributes. var Todo = Backbone.Model.extend({ ... }); // Todo Collection // --------------- // The collection of todos is backed by *localStorage* instead of a remote // server. var TodoList = Backbone.Collection.extend({ ... }); // Create our global collection of **Todos**. var Todos = new TodoList; // Todo Item View // -------------- // The DOM element for a todo item... var TodoView = Backbone.View.extend({ ... }); // The Application // --------------- // Our overall **AppView** is the top-level piece of UI. var AppView = Backbone.View.extend({ ... }); // Finally, we kick things off by creating the **App**. var App = new AppView; });
ãšããããã§ããããªãã®ãäœã£ãŠããäºããããã
Todo
… Todoã®ã¢ãã«ã- 屿§ãšããŠä»¥äžãæã€:
title
,order
,done
- 屿§ãšããŠä»¥äžãæã€:
TodoList
… Todoã®ã³ã¬ã¯ã·ã§ã³ãè€æ°ã®ã¢ãã«ãæ ŒçŽãããŸãšããŠæ±ããTodos
…TodoList
ã®ã€ã³ã¹ã¿ã³ã¹ãã³ã³ã¹ãã©ã¯ã¿ãããªããTodoView
… Todoã®ãã¥ãŒãAppView
… ã¢ããªã±ãŒã·ã§ã³èªäœã®ãã¥ãŒãApp
…AppView
ã®ã€ã³ã¹ã¿ã³ã¹ããããã³ã³ã¹ãã©ã¯ã¿ãããªãã
ãªãã§ã€ã³ã¹ã¿ã³ã¹ãæ ŒçŽãã倿°Todos
, App
ã倧æåã§éå§ããŠããã®ãã¯ããããããªããããŸãäžè¬çãªåœåèŠåã§ã¯ãªããšæãã
ããšãããèŠãã ãã§ã¯ãã©ãã§ãŠãŒã¶ãŒã€ãã³ããæŸã£ãŠããã®ããšãããŸã ããããªãããŸããæ ãŠãã«é ã«èŠãŠè¡ããŸãããã
Todoã¢ãã«
29è¡ãã¡ãœãããåã€ãããããããªãèªãããã
default()
initialize()
toggle()
clear()
ããã§å®è£ ããŠãã¡ãœããã¯åã€ã ãã©ãããã«ããããå¥ã®ã¡ãœãããåŒãã ãããŠãããã¢ãã«ã®ã¡ãœããã¯Backbone.jsãæäŸãããã®ã§ãããããããã¥ã¡ã³ãã«æ²èŒãããŠãããµããµãã
default()
// Default attributes for the todo item. defaults: function() { return { title: "empty todo...", order: Todos.nextOrder(), done: false }; },
åæå€ãè¿ããŠãã£ãœããTodos.nextOrder()
ã¯åŸãã®æ¹ïŒ70è¡ç®ïŒã§å®è£
ããŠããç¹ã«åé¡ãªãããã
initialize()
// Ensure that each todo created has `title`. initialize: function() { if (!this.get("title")) { this.set({"title": this.defaults.title}); } },
åæåŠçãTodoã®ã¿ã€ãã«ããªããã°åæå€ãèšå®ãã¯è¯ãã®ã ããã©ãthis.defaults.title
ãäžæè°ãªã³ãŒããthis.defaults().title
ã§ã¯ãªãã®ãïŒãå
éšçã«äœããã£ãŠãããŠããã ããããïŒãã¶ãtypoã ãšæã£ãŠããïŒ
get()
, set()
ã¯ã¢ãã«ã«æ ŒçŽãããŠããæ
å ±ãæäœããã¢ã¯ã»ãµã¿ãããæ
å ±ã¯ã¢ãã«ã®ãã£ãŒã«ãattributes
ããçŽæ¥æäœããäºãåºæ¥ãã¿ããã ãã©ããã¡ãããããã®ã¡ãœãããçµç±ããŠæäœããã®ããç€Œåæ£ããããã ããã
toggle()
// Toggle the `done` state of this todo item. toggle: function() { this.save({done: !this.get("done")}); },
ãã§ãã¯ããªã³ããªãããçãªãå€éšããåŒã°ãããã
save()
ãåŒãã§ç¶æ
倿Žãä¿åããŠãããä¿åå
ã®æå®ã¯ãªãã®ããªãLosalStorageã䜿ãã©ã€ãã©ãªãŒïŒ (backbone-localstorage.js
) ãå¥éèªã¿èŸŒãã§ãããã ãã©ããã£ã¡ã®æ¹ã§åŠçãäžæžããããããŠãããŠããã ãããã
clear()
// Remove this Todo from *localStorage* and delete its view. clear: function() { this.destroy(); }
ãµãšãã©ã®è¡ããããå€éšããåŒã°ããã®ããªã
destroy()
ã¯save()
ããŠããæ
å ±ãåé€ãããã®ããµãŒããŒïŒä»åã¯LocalStorageïŒããæ
å ±ãåé€ã
Todoã³ã¬ã¯ã·ã§ã³
31è¡ãäºã€ã®ãã£ãŒã«ããšåã€ã®ã¡ãœããã
model
localStorage
done()
remaining()
nextOrder()
comparator()
å
éšã§åŒãã§ãfilter()
, without()
, last()
ã¯Underscore.jsã®æ¹ã®ã¡ãœãããããã(via Underscore Methods (28) )
model
// Reference to this collection's model. model: Todo,
察象ãšãªãã¢ãã«ããã£ãäœã£ããã€ãæå®ã
localStorage
// Save all of the todo items under the `"todos"` namespace. localStorage: new Store("todos-backbone"),
Store
ã¯äžç·ã«èªã¿èŸŒãã§ã backbone-localstorage.js
ã§å®çŸ©ãããŠããã
ãããããä¿åå ã¯ã¢ãã«ãããªããŠã³ã¬ã¯ã·ã§ã³ã®æ¹ã§æå®ããã®ãããžãã
ãããããã®ïŒ
done()
// Filter down the list of all todo items that are finished. done: function() { return this.filter(function(todo){ return todo.get('done'); }); },
ãã§ãã¯ããªã³ã®ã¢ãã«ã ãæœåºããŠãããã£ãœãã
remaining()
// Filter down the list to only todo items that are still not finished. remaining: function() { return this.without.apply(this, this.done()); },
done()
ã®éçãœãããªããå®è¡ã³ã¹ãé«ããã
nextOrder()
// We keep the Todos in sequential order, despite being saved by unordered // GUID in the database. This generates the next order number for new items. nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; },
æ°ããäœãTodoã®äœçœ®ãè¿ããïŒäœçœ®ãšããããäœãšããããïŒ
ã¡ãªã¿ã«ã¢ãã«ã«äœçœ®ãèšæ¶ãããã®ã¯ãã¹ãã¬ãŒãžã«ä¿åããéã¯é åºæ å ±ããªããããã¿ãããªã³ã¡ã³ããä»ããŠãã
comparator()
// Todos are sorted by their original insertion order. comparator: function(todo) { return todo.get('order'); }
ãœãŒãã«çšããå€ãè¿ãã£ãœããäŸãã°ååé ã«ãããªããããã§todo.get('title')
ãŠãªããã«ãããè¯ããã ãããããšã¯æ¥ä»ãªãUNIXæéã«å€æããŠããè¿ããšããããDateãªããžã§ã¯ãã®ãŸãŸã§ãããã
Todoãã¥ãŒ
63è¡ãçµæ§é·ããã¡ãœãããäžã€ããã£ãŒã«ããäžã€ã
tagName
template
events
initialize()
render()
toggleDone()
edit()
close()
updateOnEnter()
clear()
tagName
//... is a list tag. tagName: "li",
ã¯ãã¯ãã¿ã°ã®ååã§ãããŒã£ãŠã®ã¯è¯ããã ãã©ãã©ãã§äœ¿ã£ãŠãã®ãããããªããå éšçã«äœ¿ã£ãŠããïŒ
調ã¹ããããã£ã±ãå
éšçã«äœ¿ã£ãŠãã¿ãããåŸè¿°ã®render()
åç
§ã
template
// Cache the template function for a single item. template: _.template($('#item-template').html()),
Underscore.jsãæäŸãããã³ãã¬ãŒããããã¯render()
ã§äœ¿ã£ãŠãã
events
// The DOM events specific to an item. events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear", "keypress .edit" : "updateOnEnter", "blur .edit" : "close" },
ãªãã"eventType selector": "methodName"
ã£ãŠæãã§ã¡ãœããåŒãã§ãããããæç€ºçã«å©çšããŠããç®æã¯ãªããããŒããBackbone.Eventsã®ä»çµã¿ãªã®ããªãã
ãšæã£ããããã£ãã
> If an events hash is not passed directly, uses this.events
as the source. Events are written in the format {"event selector": "callback"}
. The callback may be either the name of a method on the view, or a direct function body.
æèš³ããã
> åŒæ°ã§ã€ãã³ãæ
å ±ãäžããããªãå Žåã¯this.events
ãå©çšããŸããã€ãã³ãæ
å ±ã®æžåŒã¯{"event selector": "callback"}
ã§ããã³ãŒã«ããã¯ã¯ãã¥ãŒã®ã¡ãœããåããçŽæ¥é¢æ°ãæå®ããäºãã§ããŸãã
èªåçã«åŒã°ããŠãã®ããªã
initialize()
// The TodoView listens for changes to its model, re-rendering. Since there's // a one-to-one correspondence between a **Todo** and a **TodoView** in this // app, we set a direct reference on the model for convenience. initialize: function() { this.model.bind('change', this.render, this); this.model.bind('destroy', this.remove, this); },
ããã³ã¡ã³ããé·ãã ãæèš³ããŠã¿ãã
> TodoViewã¯ãã®ã¢ãã«ã®å€æŽãç£èŠããåæç»ããŸãããã®ã¢ããªã§ã¯TodoãšTodoViewã¯äžå¯Ÿäžã®ããåããªã®ã§ãå©äŸ¿æ§ã®ããã«ã¢ãã«ãçŽæ¥åç §ããŠããŸãã
ããŒããããŸãããåãããªããthis.model
ã®äºãããããšãã¡ãã»ãŒãžéä¿¡ã®æ¹ããªãã
model.bind()
ã¯ããã¥ã¡ã³ãã«æ²èŒãããŠããªããUnderscore.jsã®bind()
ã ããããã§ãåŒæ°ãéããªãããŸããã£ãŠãäºã¯äœãšãªãæ³åãã€ãããã©ã
"change"
ãšã"destroy"
ãšãã¯ã€ãã³ãã®çš®é¡ã ãããããã¥ã¡ã³ãã«äžèŠ§ãæ²èŒãããŠãããããã ããªã
> Here’s a list of all of the built-in events that Backbone.js can fire. You’re also free to trigger your own events on Models and Views as you see fit.
>
> * "add"
(model, collection) â when a model is added to a collection.
> * "remove"
(model, collection) â when a model is removed from a collection.
> * "reset"
(collection) â when the collection’s entire contents have been replaced.
> * "change"
(model, options) â when a model’s attributes have changed.
> * "change:[attribute]"
(model, value, options) â when a specific attribute has been updated.
> * "destroy"
(model, collection) â when a model is destroyed.
> * "sync"
(model, collection) â triggers whenever a model has been successfully synced to the server.
> * "error"
(model, collection) â when a model’s validation fails, or a save call fails on the server.
> * "route:[name]"
(router) â when one of a router’s routes has matched.
> * "all"
â this special event fires for any triggered event, passing the event name as the first argument.
ãµããµãã
ã€ãŸãçµå±ã®ãšãããã¢ãã«ã«å€æŽãããã°ãã¥ãŒãåæç»ãããããããã ãã€ãã³ããçµç±ããŠããåãããäºã§ççµåã«ãªã£ãŠå¹žãããšãã話ã§ããªã
render()
// Re-render the titles of the todo item. render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done', this.model.get('done')); this.input = this.$('.edit'); return this; },
this.$el
ã¯èªåã§äœãããã¿ãããã©ããã£ãŠããšæã£ãããããã§å
ã®tagName
ã䜿ãããŠãã¿ãããã€ãŸããã£ãli
ãæå®ããŠãããããããã§ã¯æ¢ã«<li />
ãäœæãããthis.$el
ã«ä¿åãããŠããã詊ãã«TodoView.prototype.tagName='span'
ãããã<span />
ãäœæãããããã«ãªã£ããæ£ç¢ºã«èšããšããŒãã®ãªããžã§ã¯ãèªäœã§ã¯ãªããŠããããæã£ãjQueryãªããžã§ã¯ãã
ã§ããã®èŠçŽ ã®å
容ãäºåã«çšæããtemplate
ãå©çšããŠãåæ§ç¯ãšããŸãã¢ãã«ãããã§ãã¯ç¶æ
ãåŸãŠåæ ãããã
$()
ã¯$el.find(selector)
ãšåããã·ã§ãŒãã«ãããšããŠç·šéçšã®èŠçŽ ïŒãã®ã¿ã€ãã³ã°ã§äœãã®ãïŒããã£ãŒã«ãã«ä¿åããŠãããæ¥é èŸä»ããŠ$input
ã«ããæ¹ãè¯ãã®ã§ã¯ãªãããã
return this
ã¯ããããããªããã©ãä»ã§ãåãäºããã£ãŠããã®ãèŠããäœ¿ãæ¹ãšããŠã¯ãview.render().$el
ã¿ãããªæãã§$el
ãæŽæ°ãã€ã€å©çšããã¿ãããæŽæ°ããªããã°çŽæ¥view.$el
ãšããã°ããããreturn this.$el
ã«ããªãã®ã¯ãå
ã®äºè
éã®çµ±äžæã®ããã ãããã
toggleDone()
// Toggle the `"done"` state of the model. toggleDone: function() { this.model.toggle(); },
ãããã¢ãã«ã§çšæããã¡ãœãããåŒãã§ããããã¥ãŒããã¢ãã«ã«ã¡ãã»ãŒãžéä¿¡ïŒã¡ãœããå®è¡ïŒããªããMVCãœãã
edit()
// Switch this view into `"editing"` mode, displaying the input field. edit: function() { this.$el.addClass("editing"); this.input.focus(); },
ç·šéã¢ãŒãã«ã
åŒã³åºãã¯events
ã§"dblclick .view" : "edit"
ãšèšå®ããŠããã$el
å
ã§HTMLã¯ã©ã¹view
ãæã€èŠçŽ ãããã«ã¯ãªãã¯ããããšããã®ã¡ãœãããå®è¡ãããããšã
ãªãã»ã©ãã€ãã³ãæžãã®ãç°¡åã§ããããã
close()
// Close the `"editing"` mode, saving changes to the todo. close: function() { var value = this.input.val(); if (!value) this.clear(); this.model.save({title: value}); this.$el.removeClass("editing"); },
ç·šéã¢ãŒããçµäºããŠãå 容ã確å®ãè¡šç€ºãæ»ãã
updateOnEnter()
// If you hit `enter`, we're through editing the item. updateOnEnter: function(e) { if (e.keyCode == 13) this.close(); },
keypress
ã€ãã³ãã§å®è¡ããããã®ãããŒã³ãŒãã確èªããŠ13 (Enter)ãªãç·šéçµäºã
clear()
// Remove the item, destroy the model. clear: function() { this.model.clear(); }
ã¢ãã«ãžéç¥ããŠçµããã
ã¢ãã«ã®clear()
ã¯åè¿°ã®éããdestroy()
ããã®ã¿ããã ããã¥ãŒã®initialize()
ã§ãããªã³ãŒãããã£ãã
this.model.bind('destroy', this.remove, this);
ãã£ãŠããã¥ãŒã®remove()
ãåŒã°ããã
ã€ãŸããããã颚ã«ãççªãïŒåŒã«åŠçãé²ãããã ã
view.clear()
mode.clear()
mode.destroy()
view.remove()
ãã¥ãŒã®remove()
ã¯$(view.el).remove();
ã«åãã
çµå±ãDBãããç»é¢ãããæ¶ãããããŒããççµåã¯ãããããšãããåããèŸãããŸã仿¹ãªããšæãããã©ã
ã¢ããªãã¥ãŒ
ããã§æåŸã86è¡ã«ã¡ãœãããäžã€ãšãã£ãŒã«ããäžã€ã
ãããã倧詰ãã§ãã
el
// Instead of generating a new element, bind to the existing skeleton of // the App already present in the HTML. el: $("#todoapp"),
Backbone.jsã®ãã¥ãŒã«ã¯el
ãš$el
ã®äºçš®é¡ãããããã£ãTodoãã¥ãŒã®æ¹ã§ã¯èªåçæããã$el
ã䜿ã£ãŠããããã©ãããã§ã¯el
ã
ããŒããããããããªãããã¶ãel
ãš$el
ã®é¢ä¿ã¯$el == $(el)
ã ãšæããã ãã©ã
ãšããããTodoã§äœ¿ã£ãŠããã®ã¯this.$el
ã§ãã£ãŠextend()
ã«äžãããã®ãããªããé¢ä¿ãªããããããããã®el
ã¯äœãªãã ãããã»ã¬ã¯ã¿ãŒ or ãªããžã§ã¯ã or é
åïŒå
é ãæ¡çšïŒãŠãªæãããªã
ã¢ããã€ã¹ã«åŸãBackbone.jsã®æ¹ãèŠãŠã¿ããã¡ããã¡ããæ¢ããããããªã®åºãŠãã:
ãŸãã¯ãã¥ãŒã®ã³ã³ã¹ãã©ã¯ã¿ã_ensureElement()
ãšããã®ãå®è¡ããŠããã
backbone.js #1141 (v0.9.2)
// Creating a Backbone.View creates its initial element outside of the DOM, // if an existing element is not provided... var View = Backbone.View = function(options) { this.cid = _.uniqueId('view'); this._configure(options || {}); this._ensureElement(); this.initialize.apply(this, arguments); this.delegateEvents(); };
ãã®äžã§ã¯this.el
ã確èªããŠã空ãªãthis.tagName
çããèŠçŽ ãçæããŠãsetElement()
ããŠããããããã¯this.el
ãïŒãããäœã§ããïŒtruthyãªããããã§setElement()
ã
backbone.js #1262 (v0.9.2)
// Ensure that the View has a DOM element to render into. // If `this.el` is a string, pass it through `$()`, take the first // matching element, and re-assign it to `el`. Otherwise, create // an element from the `id`, `className` and `tagName` properties. _ensureElement: function() { if (!this.el) { var attrs = getValue(this, 'attributes') || {}; if (this.id) attrs.id = this.id; if (this.className) attrs['class'] = this.className; this.setElement(this.make(this.tagName, attrs), false); } else { this.setElement(this.el, false); } }
æž¡ãããelement
ã確èªã $
ïŒjQueryãªããZeptoïŒã®ã€ã³ã¹ã¿ã³ã¹ãªãããããthis.$el
ãšããŠèšæ¶ãããã§ãªããªãã$()
ãéããŠããåæ§ã«ããã$()
ã«äžããã®ã¯ã»ã¬ã¯ã¿ãŒã§ãDOMããŒãã®ãªããžã§ã¯ãã§ãè¯ãã®ã§ãçã幞ãã«ãªãããšããããã ã
backbone.js #1201 (v0.9.2)
// Change the view's element (`this.el` property), including event // re-delegation. setElement: function(element, delegate) { if (this.$el) this.undelegateEvents(); this.$el = (element instanceof $) ? element : $(element); this.el = this.$el[0]; if (delegate !== false) this.delegateEvents(); return this; },
ãªãã»ã©ããšããããã§è§£æ±ºãããããŒãã
statsTemplate
// Our template for the line of statistics at the bottom of the app. statsTemplate: _.template($('#stats-template').html()),
Todoãã¥ãŒãšåãã_.template()
ã
ãã¡ãã¯ãã£ãŒã«ãåãtemplate
ã ã£ããããã¡ãã¯statsTemplate
ã«ãªã£ãŠããã®ã¯ãäœãæå³ããããã ãããã
events
// Delegated events for creating new items, and clearing completed ones. events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" },
ãããTodoãã¥ãŒãšåãã
initialize()
// At initialization we bind to the relevant events on the `Todos` // collection, when items are added or changed. Kick things off by // loading any preexisting todos that might be saved in *localStorage*. initialize: function() { this.input = this.$("#new-todo"); this.allCheckbox = this.$("#toggle-all")[0]; Todos.bind('add', this.addOne, this); Todos.bind('reset', this.addAll, this); Todos.bind('all', this.render, this); this.footer = this.$('footer'); this.main = $('#main'); Todos.fetch(); },
ããã¯ã¡ãããšé·ãããšãã£ãŠã倧ããäºã¯ãªã«ãããŠããªãã
ãŸãåé ã®ã³ã¡ã³ããæèš³ããã
> åæåŠçã§Todoã³ã¬ã¯ã·ã§ã³Todos
ã«ãé
ç®ã远å ãããã倿Žãããããããšãã®ã€ãã³ããç»é²ããŸãã
> LocalStorageã«ä¿åãããŠããæ¢åã®Todoé
ç®ã®èªã¿èŸŒãã§ããããããéå§ããŸãã
ããã§äœæãããªããžã§ã¯ãããã¢ããªã±ãŒã·ã§ã³ã®æ¬äœããšåŒãã§è¯ãã®ã ããã
this.allCheckbox
ãjQueryãªããžã§ã¯ãã§ã¯ãªãçã®DOMããŒãã«ããŠããã®ã¯äœãæå³ãããã®ã ãããããã®æ¹ãæ©ãã£ãŠã®ã¯ããã ããããã©ã
render()
// Re-rendering the App just means refreshing the statistics -- the rest // of the app doesn't change. render: function() { var done = Todos.done().length; var remaining = Todos.remaining().length; if (Todos.length) { this.main.show(); this.footer.show(); this.footer.html(this.statsTemplate({done: done, remaining: remaining})); } else { this.main.hide(); this.footer.hide(); } this.allCheckbox.checked = !remaining; },
ããããŸãé·ããTodoãã¥ãŒã®render()
ãšåãããèŠçŽ ã®ïŒåïŒæç»ãè¡ãåŠçã
Todoã«ç»é²ãããã°äžèЧãšããã¿ãŒã衚瀺ããããã§ãªããã°é衚瀺ã«ããŸãå šãŠãã§ãã¯æžã¿ãªããå šãã§ãã¯ãã®ãã§ãã¯ããã¯ã¹ããªã³ã«ããŸãã
addOne()
// Add a single todo item to the list by creating a view for it, and // appending its element to the `<ul>`. addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); },
Todoãªã¹ãã®add
ã«å®è¡ããããããinitialize()
ã®ãšãã§æå®ãããŠãåŠçã
Todoã®ãã¥ãŒãçæããŠããã®èŠçŽ ãã¢ããªå ã®äžèЧã«è¿œå ãèŠçŽ ã®è¿œå ã¯ãããã©ãTodoãã¥ãŒã®çæã¯ããã§ããäºãªã®ãïŒãTodoãªã¹ãã®æ¹ã§ãããŸã§ãã£ãŠãããŠæ¬²ãããããªãããããã¡ãã¯ãããŸã§ã¢ãã«ã®ã³ã¬ã¯ã·ã§ã³ã ããããã¥ãŒã«ã¯è§Šããªãã¹ããããããšããã¯ãããã§Todobãã¥ãŒãçæããã®ããããããã
addAll()
// Add all items in the **Todos** collection at once. addAll: function() { Todos.each(this.addOne); },
Todoãªã¹ãã®reset
ã«å®è¡ããããããinitialize()
ã®ãšãã§æå®ãããŠãåŠçã
åã¢ãã«ããšã«ãã¥ãŒãäœæãããããã
createOnEnter()
// If you hit return in the main input field, create new **Todo** model, // persisting it to *localStorage*. createOnEnter: function(e) { if (e.keyCode != 13) return; if (!this.input.val()) return; Todos.create({title: this.input.val()}); this.input.val(''); },
æ°èŠäœæã®å
¥åæ¬ã§ããŒæŒäžæã«å®è¡ããããããevents
ã§æå®ãããŠãåŠçã
å
¥åããããšãã«EnterããŒãæŒããããšãTodoãã²ãšã€äœæãããã¢ãã«äœæãšåæã«ã³ã¬ã¯ã·ã§ã³ã«è¿œå ããã®ã§ãnew Todo
ã§ã¯ãªããŠTodos.create()
ãªãã ããã
ã€ãã³ãçµç±ã§Todoãã¥ãŒãäœæãããã
clearCompleted()
// Clear all done todo items, destroying their models. clearCompleted: function() { _.each(Todos.done(), function(todo){ todo.clear(); }); return false; },
ãã§ãã¯æžã¿ã®Todoã®ã¢ãã«ã®clear()
ãåŒã¶ãå
éšã§ã¯Backbone.Model
ã®destroy()
ãåŒã°ããããããã€ãã³ãçµç±ã§ãã¥ãŒã®remove
ãå®è¡ãããã
toggleAllComplete()
toggleAllComplete: function () { var done = this.allCheckbox.checked; Todos.each(function (todo) { todo.save({'done': done}); }); }
ãå
šãã§ãã¯ãã®ãªã³ã»ãªãæã«å®è¡ããããããevents
ã§æå®ãããŠãåŠçã
ãããŸã
å šäœã§250è¡è¶³ããã®ã³ãŒãã綺éºã«åå²ãããŠããäºãããåãã£ããDOMãã€ãã³ããŸããã®æœè±¡åã¯çµæ§å¥œã¿ã ã
äœ¿ãæ¹ã®æ¹ããªããšãªãèŠããŠããããã©ãLocalStorage以å€ã䜿ãã®ã«ã©ãããã®ããšããããã©ã«ãã ãšãã¶ããµãŒããŒãšéä¿¡ãããã ãã©ãããããšãã©ããªã®ã£ãŠã®ããŸã ããããªãããŸããããããèŠãŠè¡ããŸãããã