Backbone.js in a Php Environment

Booklist Example03/03/13 Midwest Php 10

Backbone.Events●●●●●Mixin module – can be added to any objectBind, trigger, and unbindEvents are strings (eg. “change”)Trigger can pass argumentsChanges to data models can trigger automaticrefresh of views03/03/13 Midwest Php 11

Backbone.Eventsvar object = {};_.extend(object, Backbone.Events);object.bind(“poke”, function(msg) {alert(“Just got poked: “+msg); });object.trigger(“poke”, “hello...”);03/03/13 Midwest Php 12

Backbone.Model●●●●Heart of the applicationData + logic (conversions, validations,computed properties, access control, …)Create new model by extendingBackbone.ModelCreate instance with new03/03/13 Midwest Php 13

Backbone.Modelvar Book = Backbone.Model.extend({initialize: function() { // do something},defaults: { loc : '', title : '', author : ''},urlRoot: '/booklist/db.php/'});var book = new Book;03/03/13 Midwest Php 14

Backbone.Model●●Properties●●●model.id – unique server idmodel.cid – client idmodel.defaults – default attribute valuesMethods●●●●Initialize() - called on creationget(attribute) - getterset(attributes) - settervalidate() - validation03/03/13 Midwest Php 15

Backbone.Model●●More methods●●●●fetch()save()destroy()toJSON()Events●●change, destroy, errorchange event can be bound to render a view03/03/13 Midwest Php 16

Server Interaction●●Makes RESTful calls to serverCRUD (create,read,update,delete)● Create → POST server/collection/id● Read → GET server/model/id●●●Update → PUTDelete → DELETEData passed using JSON encoding03/03/13 Midwest Php 17

Example Requests●●●●●METHOD host/table/idGET http://myserver/customer/16GET http://myserver/salesclassPOST http://myserver/paymentDELETE http://myserver/appointment/213703/03/13 Midwest Php 18

Backbone.Collection●Ordered set of models●Can listen for events on any model●Create by extending Backbone.CollectionCreate an instance using new●03/03/13 Midwest Php 19

Backbone.Collectionvar Booklist = Backbone.Collection.extend({model : Book,url : '/phpdemo/db.php'});var booklist = new Booklist;03/03/13 Midwest Php 20

Backbone.Collection●Methods●●●●●●add()remove()get(id)getByCid(cid)Comparator – ordering functionUses underscore.js for iteration methods03/03/13 Midwest Php 21

Backbone.View●●●●●●Control piece that renders a viewExtend Backbone.View to create new viewUse new to create an instanceView.el – associated DOM element ($el)initialize() functionrender() function●$(selector) – locally scoped jQuery03/03/13 Midwest Php 22

Backbone.View03/03/13 Midwest Php 23

underscore templates●●●_.template(“text”) returns a template functionwhich merges properties into the textCan embed template in dummy script tag● or ● template1 = _.template(“Hi ”);●result = template1({ name : “bob”});03/03/13 Midwest Php 24

add.tmpl03/03/13 Midwest Php 25

Backbone.Router●●●●Route client side pages and connect them toactions and eventsInterfaces with hashchange eventsReacts to history navigationNeed to be aware of possible serverinteractions03/03/13 Midwest Php 26

Backbone.Router03/03/13 Midwest Php 27

Booklist App●server●●index.phpdb.php●client-side●●booklist.jstemplates03/03/13 Midwest Php 28

index.php03/03/13 Midwest Php 29

db.php03/03/13 Midwest Php 30

db.php - continued03/03/13 Midwest Php 31

db.php - continued03/03/13 Midwest Php 32

References●●Backbone.js Applications (Early Access), Addy Osmani, O'Reilly(2012)Backbone.js: Basics & Beyond, Sarah Mei, Fluent2012 video,O'Reilly (2012)● Javascript Master Class, Douglas Crockford, O'Reilly Media (2009)● Javascript The Good Parts, Douglas Crockford, O'Reilly (2008)● Javascript Web Applications, Alex MacCaw, O'Reilly (2011)●●Recipes With Backbone, Nick Gauthier and Chris Strom, eee_c(2012)Secrets of Javascript Ninjas, John Resig and Bear Bibeault, Manning(2012)03/03/13 Midwest Php 33

03/03/13 Midwest Php 34