…well and a bunch of plugins • No real structure in place • Domain objects or business logic state in the DOM • Globals to share state • Deep nested piles of jQuery callbacks Created for Help you get your truth out of the DOM!
• Sync Layer (CRUD via Ajax) • Inheritance via prototype chaining About the word Model now... • No schema! • No built-‐in relaDonal associaDons. • No built-‐in traversing of nested properDes support.
the view • Usually used with a template engine but sDll BOILERPLATE CODE #render <ar>cle id="todo-‐view" class="todo"></ar>cle> <ar>cle id="todo-‐view" class="todo"> <h3>Prepare BackboneJS slides #!@#!</h3> </ar>cle>
or its contents Under the hood: • jQuery's on / delegate is used to provide instant support for event delegaDon. • this inside all DOM event handlers always refers to the view instance! • Manually a/ach all other listeners as event listeners "<event> <selector>": "<method>"
box • but you can roll out your own 1st class route => components state mapper. • or use a subrouDng extension • or override so that 1 route triggered per Router /dashboard/todos/2/news/5 and Page State
ﬁts model • View subscribes to Model • …BUT • View handles events • View handles templaDng • Controller split between Router & View • What about MVP? • Model ﬁts model • Backbone.View ?= Presenter • Template = View • …BUT • Backbone.View can be an actual view = unique MV* ﬂavor
Sandbox Mediator Module Module Module Module Submodule Submodule Publish noDﬁcaDon Publish noDﬁcaDon Start module Publish noDﬁcaDon broadcast call method • AbstracDon of the core • Consistent Interface • Sole Survivor for modules • Security Guard • Exposes event bus • Core • Event Bus • Independent • Can depend on DOM • Do not access DOM outside their boxes • Do not create globals • Do not tell, but ask the facade Mail Chat Contacts News Addy Osmani Nicholas Zakas