JavaScript for Flex Devs
-
Upload
aaronius -
Category
Technology
-
view
9.081 -
download
1
description
Transcript of JavaScript for Flex Devs
![Page 1: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/1.jpg)
JavaScript
![Page 2: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/2.jpg)
Software Engineer, Adobe Digital Marketing Suite We enable management, measurement, execution, and
optimization of digital advertising and marketing.
HELLO my name is
@AARONIUS AARONHARDY.COM ·
![Page 3: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/3.jpg)
No hidden agenda
![Page 4: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/4.jpg)
Single-Page Apps
![Page 5: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/5.jpg)
DataGrid
DataGroup
List
CurrencyFormatter TabBar
Slider Panel
Accordion ViewStack
ToggleButtonBar
EventDispatcher ArrayCollection
Bindable
NumericStepper
DragManager
Effects
![Page 6: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/6.jpg)
Main (Application)
Header (Group)
AccountInfo (Group)
Music (ViewStack)
Artist (Group)
Menu (ToggleButtonBar)
Discography (DataGroup)
Discussion (DataGroup)
Biography (Group)
Similar Artists (List)
![Page 7: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/7.jpg)
Basic Form Elements Div
Span
Links
? ?
? ?
? Image
?
Bulleted Lists
![Page 8: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/8.jpg)
<html> <head> <script> buckets of vomit buckets of vomit buckets of vomit buckets of vomit buckets of vomit </script> </head> <body> buckets of vomit buckets of vomit buckets of vomit buckets of vomit buckets of vomit </body> </html>
![Page 9: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/9.jpg)
• IDEs • MVC • Widgets/Components • Dependency management • DOM manipulation • Templating • Testing • Utilities • JavaScript + HTML + CSS
![Page 10: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/10.jpg)
Quality ide
![Page 11: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/11.jpg)
Libraries
![Page 12: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/12.jpg)
Rolling your own
![Page 13: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/13.jpg)
jquery underscore.js
backbone.js requirejs
All MIT license (+ other options) and on GitHub
![Page 14: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/14.jpg)
Learn Javascript
![Page 15: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/15.jpg)
Never build large apps The secret to building large apps is NEVER build large apps. Break up your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application. – Justin Meyer
![Page 16: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/16.jpg)
Admit what you don’t know
The key is to acknowledge from the start that you have no idea how this will grow. When you accept that you don’t know everything, you begin to design the system defensively. – Nicholas Zakas
![Page 17: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/17.jpg)
Add "use strict"; before code or at beginning of function to help decrapify your code.
• Eliminates pitfalls by raising errors • Improves JS engine optimization • Prohibits syntax reserved for future JS versions * Won’t be used in examples to save slide space
![Page 18: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/18.jpg)
JSLint or JSHint. • Run in IDE. • Run on command line. • Run in build scripts. • Copy-paste into web interface. • Use flags for configuration.
![Page 19: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/19.jpg)
General community style: • Names of directories and files shall be lowercase and
hyphens shall be used to separate words. • Variable names shall be camelCase. • Classes (functions) to be instantiated shall start with a
capital letter. • Members intended to be private shall be prefixed with
an underscore.
![Page 20: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/20.jpg)
Loose typing == more testing! • JsTestDriver • QUnit • Jasmine • Vows • …and bucket-loads more
![Page 21: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/21.jpg)
jquery
![Page 22: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/22.jpg)
• Not an application framework! • Abstracts the DOM
• Style • Position • Behavior • Animation • Creation/Removal
• AJAX requests • Utilities for objects, arrays, strings, etc. • “Framework” for UI widgets and utilities
![Page 23: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/23.jpg)
Usage by Top Sites
http://trends.builtwith.com/javascript/jQuery
![Page 24: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/24.jpg)
• Performance-tuned servers • Allows browser to have more concurrent connections • Cross-site caching
![Page 25: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/25.jpg)
Toolbox of array, object, and function manipulation utilities.
var names = _.pluck( [{name: 'moe', age: 40}, {name: 'larry', age: 50}], 'name'); var person = _.extend({name: 'moe'}, {age: 50}); var uniques = _.union([1, 2, 3], [101, 2, 10], [2, 1]);
And bucket-loads more…
![Page 26: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/26.jpg)
Old-school var tweetTemplate = '' + '<div>' + '<div style="float: left">' + '<img src="' + avatar + '"/>' + '</div>' + '<div style="margin-left: 60px">' + '<p>' + username + '</p>' + '<p>' + text + '</p>' + '</div>' + '<div>';
![Page 27: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/27.jpg)
Old-school • HTML buried in logic (hard to re-skin) • Concatenation/escaping takes time and is error-prone • IDE might not code-hint or color-code properly • Boring and tedious
![Page 28: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/28.jpg)
New-school <script type="text/template" id="tweet-template"> <div> <div style="float: left"> <img src="<%= avatar %>"/> </div> <div style="margin-left: 60px"> <p><%= username %></p> <p><%= text %></p> </div> </div> </script> <script> var tweet = {avatar: 'aaronius.jpg', alias: '@Aaronius', text: 'Honey roasted peanuts rock my sox.'}; var template = _.template($('#tweet-template').html()); var html = template(tweet); var element = $(html); </script>
![Page 29: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/29.jpg)
• Mustache.js • Handlebars.js • Jade • Eco • …and bucket-loads more. Underscore.js templating is one of the best (though not as full-featured) and is a dependency of Backbone.js. You can use any templating engine.
![Page 30: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/30.jpg)
backbone
![Page 31: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/31.jpg)
Object A passes a function to object B and tells object B to call the function when X occurs. When X occurs, object B calls the function.
![Page 32: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/32.jpg)
backbone.events
![Page 33: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/33.jpg)
var baby = new Baby(); var changeDeuceTrap = function() { baby.deuces = 0; baby.cakeHoleShut = true; }; baby.on('turdDropped', changeDeuceTrap); Baby:
this.trigger('turdDropped');
Dad:
![Page 34: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/34.jpg)
Mix into any object or class var baby = new Baby(); baby = _.extend(baby, Backbone.Events); baby.on(…); baby.trigger(…);
![Page 35: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/35.jpg)
backbone.Model
![Page 36: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/36.jpg)
Plain Old JavaScript Object var book = { title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'historical', publisher: 'Chapman & Hall' };
How can another object know when one of book’s values changes? It can’t!
![Page 37: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/37.jpg)
Eventful Backbone.Model var book = new Backbone.Model({ title: 'A Tale of Two Cities', author: 'Charles Dickens', genre: 'historical', publisher: 'Chapman & Hall' }); book.on('change:genre', function(model, genre) { alert('genre for ' + model.get('title') + ' changed to ' + genre); }); book.set({genre: 'social criticism'});
![Page 38: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/38.jpg)
Extending Backbone.Model var Book = Backbone.Model.extend({ …custom model logic… }); var book = new Book({ title: 'A Tale of Two Cities', author: 'Charles Dickens', publisher: 'Chapman & Hall' });
![Page 39: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/39.jpg)
Persistence HTTP Method URL Action
GET /books Retrieve all books
GET /books/10 Retrieve book with id == 10
POST /books Add a book
PUT /books/10 Update book with id == 10
DELETE /books/10 Delete book with id == 10
![Page 40: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/40.jpg)
Persistence (save) var Book = Backbone.Model.extend({ urlRoot: '/books' }); var book = new Book({title: 'The Tragedy of the Commons'}); book.save();
![Page 41: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/41.jpg)
Persistence (fetch) var Book = Backbone.Model.extend({ urlRoot: '/books' }); var book = new Book({id: 2}); var fetchSuccess = function() { alert(book.get('title')); }; book.fetch({success: fetchSuccess});
![Page 42: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/42.jpg)
![Page 43: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/43.jpg)
![Page 44: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/44.jpg)
MODEL layersOpen
characterOpen magicWandOpen
colorOpen infoOpen
![Page 45: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/45.jpg)
And more… • Validation • Extracting native object • Determine which attributes have changed • And bucket-loads more…
![Page 46: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/46.jpg)
backbone.collection
![Page 47: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/47.jpg)
Plain Old JavaScript Array: var books = [book1, book2, book3, book4];
How can another object know when an item is added or removed from this array? It can’t!
![Page 48: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/48.jpg)
var goodEarth = new Backbone.Model(); var books = new Backbone.Collection(); books.on('add', function(book, books, options) { alert('Book ' + book.get('title') + ' added at index ' + options.at + '. ' + 'The collection now contains ' + books.length + ' models.'); }; books.on('remove', function(book, books, options) { alert('Book ' + book.get('title') + ' removed from index ' + options.index); } books.add(goodEarth); books.remove(goodEarth);
![Page 49: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/49.jpg)
var books = new Backbone.Collection([taleOfTwoCities, goodEarth]); books.on('change:title', function(book, title) { alert('Book title changed from ' + book.previous('title') + ' to ' + title); }); goodEarth.set({title: 'Good Earth, The'});
Event Pass-through
![Page 50: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/50.jpg)
Persistence (fetch) var Books = Backbone.Collection.extend({ model: Book, url: '/books' }); var books = new Books(); books.fetch();
![Page 51: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/51.jpg)
Underscore mix-ins var titles = books.pluck('title');
each(), reduce(), find(), filter(), reject(), shuffle(), without() and bucket-loads more!
![Page 52: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/52.jpg)
And more… • Sorting • Resetting • Retrieving model by id or index • Custom loading and parsing • …and bucket-loads more!
![Page 53: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/53.jpg)
Backbone view
![Page 54: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/54.jpg)
![Page 55: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/55.jpg)
![Page 56: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/56.jpg)
Tweet Model
Tweet Collection
Tweet
Tweet
Tweet
Tweet
Tweet
Tweet
Stats Model
![Page 57: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/57.jpg)
var Tweet = Backbone.Model.extend({ …view logic… }); var TweetRow = Backbone.View.extend({ …view logic… }); var tweet = new Tweet({ avatar: 'aaronius.jpg', alias: '@Aaronius', text: 'Honey roasted peanuts rock my sox.' }); var row = new TweetRow({ model: tweet });
![Page 58: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/58.jpg)
var TweetRow = Backbone.View.extend({ _template: _.template($('#tweet-row-template').html()), initialize: function() { this.render(); }, render: function() { this.$el.html(this._template(this.model.toJSON())); return this; } });
<script type="text/template" id="tweet-row-template"> <div style="float: left"><img src="<%= avatar %>"/></div> <div style="margin-left: 60px"> <p><%= username %></p> <p><%= text %></p> </div> </script>
![Page 59: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/59.jpg)
Backbone router
![Page 60: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/60.jpg)
backbone extensions
![Page 61: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/61.jpg)
requirejs
![Page 62: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/62.jpg)
Must we be restricted to working inside a few monstrous spaghetti files? NO! Then why are they so prevalent? • “That’s the way JavaScript has been done in the past.” • “Loading many JavaScript files requires many HTTP
requests resulting in longer load times.” • “Dependency management is hard in JavaScript.” We can do better!
![Page 63: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/63.jpg)
// What are the dependencies here!? // What if a new employee had to re-order for some reason!? <script src="script3.js"></script> <script src="script1.js"></script> <script src="script7.js"></script> <script src="script6.js"></script> <script src="script4.js"></script> <script src="script5.js"></script> <script src="script9.js"></script> <script src="script8.js"></script> <script src="script10.js"></script> <script src="script2.js"></script>
Old school
![Page 64: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/64.jpg)
script4.js
script5.js script6.js script9.js
script10.js script7.js
script8.js script1.js
script2.js
script3.js
![Page 65: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/65.jpg)
ServerJS CommonJS Module Async module definition (AMD) RequireJS
![Page 66: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/66.jpg)
define({ title: "My Sister's Keeper", publisher: "Atria" });
book.js
define([ 'book' ], function(book) { return { listBook: function() { alert(book.title); } }; });
bookshelf.js
![Page 67: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/67.jpg)
<!DOCTYPE html> <html> <head> <title>RequireJS Example</title> <script data-main="js/main“ src="js/libs/require.js"></script> </head> <body/> </html>
index.html
require([ 'bookshelf' ], function(bookshelf) { bookshelf.listBook(); });
main.js
![Page 68: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/68.jpg)
<span class="label">Title:</span> <span class="value"><%= title %></span><br/> <span class="label">Author:</span> <span class="value"><%= author %></span><br/> <span class="label">Genre:</span> <span class="value"><%= genre %></span>
templates/book.tpl.html
![Page 69: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/69.jpg)
define([ 'backbone', 'underscore', 'text!templates/book.tpl.html' ], function(Backbone, _, template) { return Backbone.View.extend({ _template: _.template(template), initialize: function() { this.render(); }, render: function() { var nativeBook = this.model.toJSON(); var html = this._template(nativeBook); this.$el.html(html); return this; } }); });
book-view.js
![Page 70: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/70.jpg)
define([ 'backbone', 'underscore', 'book-view' ], function(Backbone, _, BookView) { return Backbone.View.extend({ … create child book views as necessary … … new BookView() … }); });
bookshelf-view.js
![Page 71: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/71.jpg)
requirejs optimization
![Page 72: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/72.jpg)
Thank you!
@Aaronius aaronhardy.com
![Page 73: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/73.jpg)
encore (stuff I fit in if time allows)
![Page 74: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/74.jpg)
Persistence with custom url pattern: var Book = Backbone.Model.extend({ urlRoot: '/books', url: function() { return this.urlRoot + '?id=' + this.get('id'); } }) var book = new Book({id: 2}); book.fetch();
![Page 75: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/75.jpg)
var App = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { var tweet = new Tweet({ avatar: 'avatar.jpg', username: '@Aaronius', text: 'Honey roasted peanuts rock my sox.' }); var row = new TweetRow({ model: tweet }); this.$el.append(row.$el); return this; } }); var app = new App({el: $('body')});
![Page 76: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/76.jpg)
var DocumentView = Backbone.View.extend({ events: { "dblclick" : "open", "click .icon.doc" : "select", "mouseover .title .date" : "showTooltip" }, render: function() { ... }, open: function() { ... }, select: function() { ... }, showTooltip: function() { ... }, });
![Page 77: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/77.jpg)
<script type="text/javascript"> $(function() { var AppRouter = Backbone.Router.extend({ routes: { "shirt/id/:id": "showShirt" }, showShirt: function(id) { alert('Show shirt with id ' + id); } }); var appRouter = new AppRouter(); Backbone.history.start(); }); </script> <a href="#shirt/id/5">Shirt with id of 5</a><br> <a href="#shirt/id/10">Shirt with id of 10</a><br> <a href="#shirt/id/15">Shirt with id of 15</a><br>
![Page 78: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/78.jpg)
<script type="text/javascript"> $(function() { var AppRouter = Backbone.Router.extend({ routes: { ":product/:attribute/:value": "showProduct" }, showProduct: function(product, attribute, value) { alert('Show ' + product + ' where ' + attribute + ' = ' + value + '.'); } }); var appRouter = new AppRouter(); Backbone.history.start(); }); </script> <a href="#shoe/size/12">Size 12 shoes</a><br> <a href="#shirt/id/5">Shirt with id of 5</a><br> <a href="#hat/color/black">Black hats</a>
![Page 79: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/79.jpg)
var AppRouter = Backbone.Router.extend({ routes: { ":product/:attribute/:value": "showProduct" } }); var MyView = Backbone.View.extend({ initialize: function(options) { options.router.on('route:showProduct', this._showProduct); } _showProduct: function(product, attribute, value) { alert('Update to show ' + product + ' where ' + attribute + ' = ' + value + '.'); } }); var appRouter = new AppRouter(); var view = new MyView({router: appRouter}); Backbone.history.start();
![Page 80: JavaScript for Flex Devs](https://reader033.fdocuments.net/reader033/viewer/2022052822/554bce1db4c905706a8b49b4/html5/thumbnails/80.jpg)
Fragment Identifier • Using URLs in unintended ways • Dependent on JavaScript • Controversial • Used by many popular sites pushState aka HTML5 History • The bee’s knees • Allows changing of core url without changing pages • Long-term solution • Browser support lacking (guess which browser)