Abstract image of a woman sitting on books and studying on a laptop

前端MVC 豆瓣说

Ting Lv, profile picture
Ting Lv

The document describes the Backbone.js framework and how it can be used to build single page applications. It explains the core components of Backbone - Models, Collections, Views and Routers. It provides examples of initializing a Backbone application, defining models and collections, creating views to render data, and setting up routes and navigation. It also covers events, templating, and best practices for structuring Backbone code into separate JavaScript files for models, collections, views etc.

Technology
1 of 116
Downloaded 365 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
前端MVC 豆瓣说
• • •
前端MVC 豆瓣说
var Comment = Backbone.Model.extend();
var Comment = Backbone.Model.extend(); var comment = new Comment({ id: 83562107 text: " “ ” " created_at: "2011-07-03 09:04:34" user: { uid: "keso" id: "1000185" screen_name: "keso" } });
• • •
– extend - constructor / initialize – get – set – escape – has – unset – clear – id – cid – attributes – defaults - toJSON
comment.get('text'); // “ ” comment.set( {'text':'<script>alert('xss')</script>'}, {silent:true} ); – extend comment.escape('text'); - constructor / initialize // &lt;script&gt;alert(&#x27xss&#x27) – get &lt;&#x2F;script&gt; – set – escape comment.has('city'); // false – has – unset comment.unset('text'); // trigger 'change' event – clear – id – cid – attributes – defaults - toJSON
comment.get('text'); // “ ” comment.set( {'text':'<script>alert('xss')</script>'}, {silent:true} ); – extend comment.escape('text'); - constructor / initialize // &lt;script&gt;alert(&#x27xss&#x27) – get &lt;&#x2F;script&gt; – set – escape comment.has('city'); // false – has – unset comment.unset('text'); // trigger 'change' event – clear – id – cid – attributes var Comment = new Backbone.Model.extend({ – defaults // hash or function() - toJSON defaults: { 'source': 'douban.com' }, initialize: function() { ... } }); var comment = new Comment(); comment.get('source'); // 'douban.com'
var Comment = new Backbone.Model.extend({ urlRoot: '/comments' initialize: function(attrs) { ... } }); var comment = new Comment({id:123456}); – fetch comment.url(); // '/comments/123456' comment.fetch(); – save – destroy – validate – url – urlRoot var Comment = new Backbone.Model.extend({ – parse initialize: function(attrs) { ... }, – clone validate: function(attrs) { – isNew if ( attrs.text.length < 3 ) { – change return ' 3 ' – hasChanged } – changedAttributes – previous } – previousAttributes }); var comment = new Comment(); comment.set({text:'ok'},{ error: function(model,error) { alert(error); } });
• • •
前端MVC 豆瓣说
• • •
var Comments = new Backbone.Collection.extend({ model: Comment, initialize: function(models,options) { } });
[ { text: " “ ” " created_at: "2011-07-03 09:04:34" source: "douban.com" user: { city: " " statuses_count: 172 uid: "keso" following_count: 1688 created_at: "2005-04-07 18:01:26" followers_count: 6178 small_avatar: "http://img3.douban.com/icon/u1000185-2.jpg" id: "1000185" screen_name: "keso" ... } id: 83562107 }, {...} {...} ]
App.Collections.Comments = Backbone.Collection.extend({ – model – constructor / initialize model: Comment, – models initialize: function(models,options) { – toJSON – Underscore Methods (25) this.url = '/api/statuses/' + options.id + '/comments' – get + (options.count ? '?count=' + options.count : '') – getByCid + (options.page ? '&page=' + options.page : ''); this.page = 1; – at – length }, – comparator comparator: function(model) { – sort return -model.get('id'); – pluck } – url – parse });
• • •
• • •
collection.create(attributes, [options])
collection.create(attributes, [options]) var Comments = new Comments([{...}]);
collection.create(attributes, [options]) var Comments = new Comments([{...}]); Comments.create({text: "It's no big deal!"});
collection.create(attributes, [options]) var Comments = new Comments([{...}]); Comments.create({text: "It's no big deal!"});
collection.create(attributes, [options]) var Comments = new Comments([{...}]); Comments.create({text: "It's no big deal!"}); var comment = new Comment({ text: "It's no big deal!", }); comment.save(); Comments.add(comment);
前端MVC 豆瓣说
前端MVC 豆瓣说
• • •
前端MVC 豆瓣说
App.Views.Comment = Backbone.View.extend({ className: 'comment-item', template: $('#comment-item-template').html(), events: { "mouseenter" : "showActions", "mouseleave" : "hideActions" }, initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())); $(this.el).attr({ 'data-item-id': this.model.id, 'data-comment-id': this.model.id }); return this; }, showActions: function(e) { this.$('.icon-delete').show(); }, hideActions: function(e) { this.$('.icon-delete').hide(); } });
App.Views.Comment = Backbone.View.extend({ className: 'comment-item', template: $('#comment-item-template').html(), events: { "mouseenter" : "showActions", "mouseleave" : "hideActions" }, initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())); $(this.el).attr({ 'data-item-id': this.model.id, 'data-comment-id': this.model.id }); return this; }, showActions: function(e) { this.$('.icon-delete').show(); }, var view = new App.Views.Comment({ hideActions: function(e) { model: model this.$('.icon-delete').hide(); }); } }); $('body').append(view.render().el);
前端MVC 豆瓣说
App.Router.Shuo = Backbone.Router.extend({ routes: { "" : "home", ":uid" : "profile", ":uid/following" : "following", ":uid/status/:id" : "permalink", "search/:query" : "search" }, initialize: function() { Backbone.history.start({pushState: true, root:'/'}); }, home: function() { App.Pages.Home = new App.Views.Home(); oBody.append(App.Pages.Home.render().el); this.navigate(''); }, profile: function(uid) { App.Pages.Profile[uid] = new App.Views.Profile({uid: uid}); oBody.append(App.Pages.Profile[uid].render().el); this.navigate(uid,true); }, following: function(uid) { ... permalink: function(uid,id) { ... search: function(query) { ... });
router.route(route, name, callback) initialize: function(options) { // Matches #page/10, passing "10" this.route("page/:number", "page", function(number){ ... }); // Matches /117-a/b/c/open, passing "117-a/b/c" this.route(/^(.*?)/open$/, "open", function(id){ ... }); }
• •
Backbone.history.start([options]) App.Router.Shuo = Backbone.Router.extend({ routes: { "" : "home", ":uid" : "profile", ":uid/following" : "following", ":uid/status/:id" : "permalink", "search/:query" : "search" }, initialize: function() { Backbone.history.start({pushState: true, root:'/'}); }, ...
Backbone.Events ◦ "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, collection) — when a model's attributes have changed. ◦ "change:[attribute]" (model, collection) — when a specific attribute has been updated. ◦ "destroy" (model, collection) — when a model is destroyed. ◦ "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.
object.bind(event, callback) App.Views.Comment = Backbone.View.extend({ className: 'comment-item', template: $('#comment-item-template').html(), initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())); $(this.el).attr({ 'data-item-id': this.model.id, 'data-comment-id': this.model.id }); return this; } });
Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses (jQuery/Zepto).ajax to make a RESTful JSON request. You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.
前端MVC 豆瓣说
Models Interactive Data Domain- specific methods
Models Collections Interactive Data Domain- Ordered Sets of Models specific methods
Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Render HTML/CSS With Javascript templating
Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Router Render HTML/CSS With Methods For Routing URL Javascript templating Fragments
Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Router Render HTML/CSS With Methods For Routing URL Javascript templating Fragments
Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Router Render HTML/CSS With Methods For Routing URL Javascript templating Fragments
public/js
public/js
public/js -- /libs/ |- jquery.js |- backbone.js |- underscore.js |- json2.js |- mustache.js |- cacheprovider.js -- /applications.js -- /models/ -- /collections/ -- /views/ -- /controllers/
../application.js
var App = { Views: {}, Router: {}, Collections: {}, Cache: new CacheProvider(), initialize: function(){ new App.Router.Shuo(); Backbone.history.start({pushState: true}); } }; public/js/application.js
App.Routers.Shuo = Backbone.Router.extend({ routes: { "" : "home", "comments" : "comments", "mentions" : "mentions", ":uid" : "profile", ":uid/following" : "following", ":uid/followers" : "followers", ":uid/status/:id" : "permalink", "search/users/:query" : "user_search", "search/:query" : "search" }, initialize: function() { ... }, home: function() { ... }, comments: function() { ... }, mentions: function() { ... }, profile: function(uid) { ... }, following: function(uid) { ... }, followers: function(uid) { ... }, permalink: function(uid,id) { ... }, user_search: function(query) { ... }, search: function(query) { ... } }); public/js/controllers/shuo.js
public/js/models
public/js/models
public/js/models |- comment.js |- comment_notification.js |- mention.js |- stat.js |- status.js |- user.js
public/js/collections
public/js/collections
public/js/collections |- comments.js |- follow_in_common.js |- followers.js |- home_timeline.js |- likers.js |- mentions.js |- resharers.js |- results.js |- suggestions.js |- user_recommendations.js |- user_results.js |- user_timeline.js |- users.js
public/js/views
前端MVC 豆瓣说
Home
前端MVC 豆瓣说
Main
Main Dashboard
前端MVC 豆瓣说
HomeHeader Stream
HomeHeader Navigation Following Followers Suggestion Stream ADs Footer
前端MVC 豆瓣说
Status Resharers Comments
Status Resharers Comments
new App.Views.StreamItem(); model: Status Status model.fetch() this.render() Resharers Comments
new App.Views.StreamItem(); model: Status Status model.fetch() this.render() Resharers new App.Views.Resharers()... Comments
new App.Views.StreamItem(); model: Status Status model.fetch() this.render() Resharers new App.Views.Resharers()... new App.Views.Comments() this.collection = new Comments([],{ id: status.id Comments }); this.collection.fetch() this.collection.create() this.collection.remove()
... <div id="page-outer"> </div> ... <script id="status-item-template" type="text/template">...</script> <script id="comment-item-template" type="text/template">...</script> ... template/app.html
App.Views.Permalink = Backbone.View.extend({ el: oDoc, initialize: function(options) { _.bindAll(this, 'render', 'loadStatus', 'loadResharers', 'loadLikers', 'loadComments'); var self = this; $.ajax('/api/statuses/' + options.id + '?pack=1&comment_count=50&reshare_count=14&like_count=14') .success(function(resp) { self.status = new Status(resp.status, {id: options.id}); self.comments = new App.Collections.Comments(resp.comments, {id: options.id}); self.resharers = new App.Collections.Resharers(resp.reshare_users, {id: options.id}); self.loadStatus(); }) .error(function(resp){ // 404 } }); }, render: function() { return this; }, loadStatus: function() { var view = new App.Views.StreamItem({ model: this.status }); this.loadComments(); this.loadResharers(); oPageContainer.prepend(view.render().el); }, loadResharers: function() { ... }, loadComments: function() { ... } }); public/js/views/permalink.js
App.Views.Permalink = Backbone.View.extend({ ... loadComments: function() { var view = new App.Views.Comments({ model: this.status, collection: this.comments }); oPageContainer.prepend(view.render().el); } }); public/js/views/permalink.js
App.Views.Comments = Backbone.View.extend({ className: 'comments-manager', template: $('#comments-components-template').html(), title_template: '{{#comments_count}}<h3>{{comments_count}} </h3>{{/comments_count}}', events: { "click .submit" : "submitComment", }, initialize: function(options) { _.bindAll(this,'render', 'loadTitle', 'loadOne', 'loadAll'); this.status = options.status; this.collection.bind('add', this.loadOne); this.collection.bind('remove', this.loadAll); this.collection.bind('reset', this.loadAll); }, render: function() { $(this.el).html(Mustache.to_html(this.template,{ logged_out: !shuo.loggedIn })); this.title = this.$('.comments-title'); this.oBnSubmit = this.$('.submit-area input'); this.comments = this.$('.comments-items'); this.loadTitle(this.status.toJSON()); this.loadAll(); return this; }, loadOne: function(model) { if ( model.isNew() ) { var view = new App.Views.Comment({ model: model }); this.comments.append(view.render().el); } }, loadTitle: function(data) { this.title.html(Mustache.to_html(this.title_template,data)); }, loadAll: function() { public/js/views/comments.js }, this.collection.each(this.loadOne); create: function(e) {
App.initialize();
BackboneJS MustacheJS UnderscoreJS
BackboneJS MustacheJS UnderscoreJS
MustacheJS
{ entities: { user_mentions: [], urls: [] } text: " “ ” " created_at: "2011-07-03 09:04:34" source: "douban.com" user: { city: " " icon_avatar: "http://img3.douban.com/icon/ui1000185-2.jpg" statuses_count: 172 uid: "keso" following_count: 1688 url: "" created_at: "2005-04-07 18:01:26" description: "keso http:// blog.donews.com/keso" followers_count: 6178 location: " " small_avatar: "http://img3.douban.com/icon/u1000185-2.jpg" following: false verified: false large_avatar: "http://img3.douban.com/icon/ul1000185-2.jpg" id: "1000185" screen_name: "keso" } id: 83562107 }
<script id="comment-item-template" type="text/template"> <div class="comment-item-content" data-user-id="{{#user}}{{uid}}{{/user}}" data-item-id="{{id}}" data- comment-id="{{id}}"> {{#user}} <div class="icon"> <a href="/#{{uid}}"><img src="{{small_avatar}}" alt="{{screen_name}}"/></a> </div> {{/user}} <div class="content"> <p> {{#user}} <a href="/#!/{{uid}}" class="to" title="{{uid}}">{{screen_name}}</a> {{/user}} <span class="comment-time">{{timestamp}}</span> </p> <p> <span class="comment-text">{{{text}}}</span> <a href="" class="icon-comment" title=" "><img src="http://img3.douban.com/anduin/pics/ blank.gif"/></a> </p> </div> </div> </script>
Mustache.to_html(template,data);
MustacheJS
前端MVC 豆瓣说
BackboneJS MustacheJS UnderscoreJS
UnderscoreJS
前端MVC 豆瓣说
http://shuo.douban.com/imdonkey

More Related Content

PDF
Be RESTful (Symfony Camp 2008)
Fabien Potencier
 
PDF
Virtual Madness @ Etsy
Nishan Subedi
 
PDF
Symfony CoP: Form component
Samuel ROZE
 
KEY
Advanced jQuery
sergioafp
 
PDF
CQRS and Event Sourcing in a Symfony application
Samuel ROZE
 
PDF
How I started to love design patterns
Samuel ROZE
 
PPTX
Bacbkone js
Артём Курапов
 
PDF
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
 
Be RESTful (Symfony Camp 2008)
Fabien Potencier
 
Virtual Madness @ Etsy
Nishan Subedi
 
Symfony CoP: Form component
Samuel ROZE
 
Advanced jQuery
sergioafp
 
CQRS and Event Sourcing in a Symfony application
Samuel ROZE
 
How I started to love design patterns
Samuel ROZE
 
Bacbkone js
Артём Курапов
 
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
 

What's hot (20)

PDF
Min-Maxing Software Costs - Laracon EU 2015
Konstantin Kudryashov
 
PDF
Min-Maxing Software Costs
Konstantin Kudryashov
 
PDF
Design how your objects talk through mocking
Konstantin Kudryashov
 
PDF
Functionality Focused Code Organization
Rebecca Murphey
 
PDF
Cyclejs introduction
Arye Lukashevski
 
PDF
PhoneGap: Local Storage
Ivano Malavolta
 
KEY
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
PDF
Building Large jQuery Applications
Rebecca Murphey
 
PPTX
Sencha Touch - Introduction
ABC-GROEP.BE
 
PDF
Silex meets SOAP & REST
Hugo Hamon
 
PDF
Design Patterns avec PHP 5.3, Symfony et Pimple
Hugo Hamon
 
PDF
A New Baseline for Front-End Devs
Rebecca Murphey
 
PDF
How I started to love design patterns
Samuel ROZE
 
PDF
Doctrine For Beginners
Jonathan Wage
 
PDF
Mulberry: A Mobile App Development Toolkit
Rebecca Murphey
 
KEY
Backbone js
rstankov
 
PDF
Decoupling the Ulabox.com monolith. From CRUD to DDD
Aleix Vergés
 
PDF
Building mobile web apps with Mobello
Jeong-Geun Kim
 
KEY
Keeping It Small with Slim
Raven Tools
 
PDF
Mashing up JavaScript
Bastian Hofmann
 
Min-Maxing Software Costs - Laracon EU 2015
Konstantin Kudryashov
 
Min-Maxing Software Costs
Konstantin Kudryashov
 
Design how your objects talk through mocking
Konstantin Kudryashov
 
Functionality Focused Code Organization
Rebecca Murphey
 
Cyclejs introduction
Arye Lukashevski
 
PhoneGap: Local Storage
Ivano Malavolta
 
Symfony2 Building on Alpha / Beta technology
Daniel Knell
 
Building Large jQuery Applications
Rebecca Murphey
 
Sencha Touch - Introduction
ABC-GROEP.BE
 
Silex meets SOAP & REST
Hugo Hamon
 
Design Patterns avec PHP 5.3, Symfony et Pimple
Hugo Hamon
 
A New Baseline for Front-End Devs
Rebecca Murphey
 
How I started to love design patterns
Samuel ROZE
 
Doctrine For Beginners
Jonathan Wage
 
Mulberry: A Mobile App Development Toolkit
Rebecca Murphey
 
Backbone js
rstankov
 
Decoupling the Ulabox.com monolith. From CRUD to DDD
Aleix Vergés
 
Building mobile web apps with Mobello
Jeong-Geun Kim
 
Keeping It Small with Slim
Raven Tools
 
Mashing up JavaScript
Bastian Hofmann
 
Ad

Similar to 前端MVC 豆瓣说 (20)

PDF
Understanding backbonejs
Nick Lee
 
PDF
Heroku pop-behind-the-sense
Ben Lin
 
PDF
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
PDF
前端MVC之BackboneJS
Zhang Xiaoxue
 
PDF
Aplicacoes dinamicas Rails com Backbone
Rafael Felix da Silva
 
PPT
Backbone js
husnara mohammad
 
PPTX
Rapid prototyping and easy testing with ember cli mirage
Krzysztof Bialek
 
PPTX
Nodejs do teste de unidade ao de integração
Vinícius Pretto da Silva
 
PDF
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
PDF
Backbone Basics with Examples
Sergey Bolshchikov
 
PDF
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
 
PPTX
Intro to Ember.JS 2016
Sandino Núñez
 
PDF
WordPress Realtime - WordCamp São Paulo 2015
Fernando Daciuk
 
ZIP
First Steps in Drupal Code Driven Development
Nuvole
 
KEY
ISUCONアプリを Pythonで書いてみた
memememomo
 
PDF
Clean Javascript
Ryunosuke SATO
 
PPTX
Authenticating and Securing Node.js APIs
Jimmy Guerrero
 
PDF
Writing Maintainable JavaScript
Andrew Dupont
 
PPT
Backbone.js
Knoldus Inc.
 
PPTX
ES6 Overview
Bruno Scopelliti
 
Understanding backbonejs
Nick Lee
 
Heroku pop-behind-the-sense
Ben Lin
 
Bonnes pratiques de développement avec Node js
Francois Zaninotto
 
前端MVC之BackboneJS
Zhang Xiaoxue
 
Aplicacoes dinamicas Rails com Backbone
Rafael Felix da Silva
 
Backbone js
husnara mohammad
 
Rapid prototyping and easy testing with ember cli mirage
Krzysztof Bialek
 
Nodejs do teste de unidade ao de integração
Vinícius Pretto da Silva
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
Backbone Basics with Examples
Sergey Bolshchikov
 
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook
 
Intro to Ember.JS 2016
Sandino Núñez
 
WordPress Realtime - WordCamp São Paulo 2015
Fernando Daciuk
 
First Steps in Drupal Code Driven Development
Nuvole
 
ISUCONアプリを Pythonで書いてみた
memememomo
 
Clean Javascript
Ryunosuke SATO
 
Authenticating and Securing Node.js APIs
Jimmy Guerrero
 
Writing Maintainable JavaScript
Andrew Dupont
 
Backbone.js
Knoldus Inc.
 
ES6 Overview
Bruno Scopelliti
 
Ad

Recently uploaded (20)

PPTX
The various Industrial Revolutions .pptx
bandileshozi3
 
PPT
What is a Computer? Input Devices /output devices
GulJan8
 
PDF
Architecture types and enterprise applications.pdf
ChristopherTHyatt
 
PPT
Geologic Time for studying geology for geologist
ssuser738f5a
 
PDF
Hybrid model detection and classification of lung cancer
IAESIJAI
 
PDF
Taming the Chaos: How to Turn Unstructured Data into Decisions
Safe Software
 
PDF
Hindi spoken digit analysis for native and non-native speakers
IAESIJAI
 
PDF
sustainability-14-14877-v2.pddhzftheheeeee
VenkateshGovindaraja9
 
PDF
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
PDF
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
TrustArc
 
PDF
August Patch Tuesday
Ivanti
 
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
IAESIJAI
 
PDF
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Microsoft Dynamics
 
PDF
Enhancing emotion recognition model for a student engagement use case through...
IAESIJAI
 
PDF
Unlock new opportunities with location data.pdf
Precisely
 
PDF
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
PDF
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
IAESIJAI
 
PPTX
Web Crawler for Trend Tracking Gen Z Insights.pptx
Actowiz Solustions
 
PPTX
Final SEM Unit 1 for mit wpu at pune .pptx
anishtilekar08
 
PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
SilvioHayashi
 
The various Industrial Revolutions .pptx
bandileshozi3
 
What is a Computer? Input Devices /output devices
GulJan8
 
Architecture types and enterprise applications.pdf
ChristopherTHyatt
 
Geologic Time for studying geology for geologist
ssuser738f5a
 
Hybrid model detection and classification of lung cancer
IAESIJAI
 
Taming the Chaos: How to Turn Unstructured Data into Decisions
Safe Software
 
Hindi spoken digit analysis for native and non-native speakers
IAESIJAI
 
sustainability-14-14877-v2.pddhzftheheeeee
VenkateshGovindaraja9
 
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
TrustArc
 
August Patch Tuesday
Ivanti
 
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
IAESIJAI
 
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Microsoft Dynamics
 
Enhancing emotion recognition model for a student engagement use case through...
IAESIJAI
 
Unlock new opportunities with location data.pdf
Precisely
 
A novel scalable deep ensemble learning framework for big data classification...
IAESIJAI
 
How ambidextrous entrepreneurial leaders react to the artificial intelligence...
IAESIJAI
 
Web Crawler for Trend Tracking Gen Z Insights.pptx
Actowiz Solustions
 
Final SEM Unit 1 for mit wpu at pune .pptx
anishtilekar08
 
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
SilvioHayashi
 

前端MVC 豆瓣说

  • 32. var Comment = Backbone.Model.extend();
  • 33. var Comment = Backbone.Model.extend(); var comment = new Comment({ id: 83562107 text: " “ ” " created_at: "2011-07-03 09:04:34" user: { uid: "keso" id: "1000185" screen_name: "keso" } });
  • 35. – extend - constructor / initialize – get – set – escape – has – unset – clear – id – cid – attributes – defaults - toJSON
  • 36. comment.get('text'); // “ ” comment.set( {'text':'<script>alert('xss')</script>'}, {silent:true} ); – extend comment.escape('text'); - constructor / initialize // &lt;script&gt;alert(&#x27xss&#x27) – get &lt;&#x2F;script&gt; – set – escape comment.has('city'); // false – has – unset comment.unset('text'); // trigger 'change' event – clear – id – cid – attributes – defaults - toJSON
  • 37. comment.get('text'); // “ ” comment.set( {'text':'<script>alert('xss')</script>'}, {silent:true} ); – extend comment.escape('text'); - constructor / initialize // &lt;script&gt;alert(&#x27xss&#x27) – get &lt;&#x2F;script&gt; – set – escape comment.has('city'); // false – has – unset comment.unset('text'); // trigger 'change' event – clear – id – cid – attributes var Comment = new Backbone.Model.extend({ – defaults // hash or function() - toJSON defaults: { 'source': 'douban.com' }, initialize: function() { ... } }); var comment = new Comment(); comment.get('source'); // 'douban.com'
  • 38. var Comment = new Backbone.Model.extend({ urlRoot: '/comments' initialize: function(attrs) { ... } }); var comment = new Comment({id:123456}); – fetch comment.url(); // '/comments/123456' comment.fetch(); – save – destroy – validate – url – urlRoot var Comment = new Backbone.Model.extend({ – parse initialize: function(attrs) { ... }, – clone validate: function(attrs) { – isNew if ( attrs.text.length < 3 ) { – change return ' 3 ' – hasChanged } – changedAttributes – previous } – previousAttributes }); var comment = new Comment(); comment.set({text:'ok'},{ error: function(model,error) { alert(error); } });
  • 42. var Comments = new Backbone.Collection.extend({ model: Comment, initialize: function(models,options) { } });
  • 43. [ { text: " “ ” " created_at: "2011-07-03 09:04:34" source: "douban.com" user: { city: " " statuses_count: 172 uid: "keso" following_count: 1688 created_at: "2005-04-07 18:01:26" followers_count: 6178 small_avatar: "http://img3.douban.com/icon/u1000185-2.jpg" id: "1000185" screen_name: "keso" ... } id: 83562107 }, {...} {...} ]
  • 44. App.Collections.Comments = Backbone.Collection.extend({ – model – constructor / initialize model: Comment, – models initialize: function(models,options) { – toJSON – Underscore Methods (25) this.url = '/api/statuses/' + options.id + '/comments' – get + (options.count ? '?count=' + options.count : '') – getByCid + (options.page ? '&page=' + options.page : ''); this.page = 1; – at – length }, – comparator comparator: function(model) { – sort return -model.get('id'); – pluck } – url – parse });
  • 49. collection.create(attributes, [options]) var Comments = new Comments([{...}]); Comments.create({text: "It's no big deal!"});
  • 50. collection.create(attributes, [options]) var Comments = new Comments([{...}]); Comments.create({text: "It's no big deal!"});
  • 51. collection.create(attributes, [options]) var Comments = new Comments([{...}]); Comments.create({text: "It's no big deal!"}); var comment = new Comment({ text: "It's no big deal!", }); comment.save(); Comments.add(comment);
  • 56. App.Views.Comment = Backbone.View.extend({ className: 'comment-item', template: $('#comment-item-template').html(), events: { "mouseenter" : "showActions", "mouseleave" : "hideActions" }, initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())); $(this.el).attr({ 'data-item-id': this.model.id, 'data-comment-id': this.model.id }); return this; }, showActions: function(e) { this.$('.icon-delete').show(); }, hideActions: function(e) { this.$('.icon-delete').hide(); } });
  • 57. App.Views.Comment = Backbone.View.extend({ className: 'comment-item', template: $('#comment-item-template').html(), events: { "mouseenter" : "showActions", "mouseleave" : "hideActions" }, initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())); $(this.el).attr({ 'data-item-id': this.model.id, 'data-comment-id': this.model.id }); return this; }, showActions: function(e) { this.$('.icon-delete').show(); }, var view = new App.Views.Comment({ hideActions: function(e) { model: model this.$('.icon-delete').hide(); }); } }); $('body').append(view.render().el);
  • 59. App.Router.Shuo = Backbone.Router.extend({ routes: { "" : "home", ":uid" : "profile", ":uid/following" : "following", ":uid/status/:id" : "permalink", "search/:query" : "search" }, initialize: function() { Backbone.history.start({pushState: true, root:'/'}); }, home: function() { App.Pages.Home = new App.Views.Home(); oBody.append(App.Pages.Home.render().el); this.navigate(''); }, profile: function(uid) { App.Pages.Profile[uid] = new App.Views.Profile({uid: uid}); oBody.append(App.Pages.Profile[uid].render().el); this.navigate(uid,true); }, following: function(uid) { ... permalink: function(uid,id) { ... search: function(query) { ... });
  • 60. router.route(route, name, callback) initialize: function(options) { // Matches #page/10, passing "10" this.route("page/:number", "page", function(number){ ... }); // Matches /117-a/b/c/open, passing "117-a/b/c" this.route(/^(.*?)/open$/, "open", function(id){ ... }); }
  • 62. Backbone.history.start([options]) App.Router.Shuo = Backbone.Router.extend({ routes: { "" : "home", ":uid" : "profile", ":uid/following" : "following", ":uid/status/:id" : "permalink", "search/:query" : "search" }, initialize: function() { Backbone.history.start({pushState: true, root:'/'}); }, ...
  • 63. Backbone.Events ◦ "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, collection) — when a model's attributes have changed. ◦ "change:[attribute]" (model, collection) — when a specific attribute has been updated. ◦ "destroy" (model, collection) — when a model is destroyed. ◦ "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.
  • 64. object.bind(event, callback) App.Views.Comment = Backbone.View.extend({ className: 'comment-item', template: $('#comment-item-template').html(), initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, render: function() { $(this.el).html(Mustache.to_html(this.template, this.model.toJSON())); $(this.el).attr({ 'data-item-id': this.model.id, 'data-comment-id': this.model.id }); return this; } });
  • 65. Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses (jQuery/Zepto).ajax to make a RESTful JSON request. You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.
  • 68. Models Collections Interactive Data Domain- Ordered Sets of Models specific methods
  • 69. Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Render HTML/CSS With Javascript templating
  • 70. Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Router Render HTML/CSS With Methods For Routing URL Javascript templating Fragments
  • 71. Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Router Render HTML/CSS With Methods For Routing URL Javascript templating Fragments
  • 72. Models Collections Interactive Data Domain- Ordered Sets of Models specific methods Views Router Render HTML/CSS With Methods For Routing URL Javascript templating Fragments
  • 75. public/js -- /libs/ |- jquery.js |- backbone.js |- underscore.js |- json2.js |- mustache.js |- cacheprovider.js -- /applications.js -- /models/ -- /collections/ -- /views/ -- /controllers/
  • 77. var App = { Views: {}, Router: {}, Collections: {}, Cache: new CacheProvider(), initialize: function(){ new App.Router.Shuo(); Backbone.history.start({pushState: true}); } }; public/js/application.js
  • 78. App.Routers.Shuo = Backbone.Router.extend({ routes: { "" : "home", "comments" : "comments", "mentions" : "mentions", ":uid" : "profile", ":uid/following" : "following", ":uid/followers" : "followers", ":uid/status/:id" : "permalink", "search/users/:query" : "user_search", "search/:query" : "search" }, initialize: function() { ... }, home: function() { ... }, comments: function() { ... }, mentions: function() { ... }, profile: function(uid) { ... }, following: function(uid) { ... }, followers: function(uid) { ... }, permalink: function(uid,id) { ... }, user_search: function(query) { ... }, search: function(query) { ... } }); public/js/controllers/shuo.js
  • 81. public/js/models |- comment.js |- comment_notification.js |- mention.js |- stat.js |- status.js |- user.js
  • 84. public/js/collections |- comments.js |- follow_in_common.js |- followers.js |- home_timeline.js |- likers.js |- mentions.js |- resharers.js |- results.js |- suggestions.js |- user_recommendations.js |- user_results.js |- user_timeline.js |- users.js
  • 87. Home
  • 89. Main
  • 90. Main Dashboard
  • 93. HomeHeader Navigation Following Followers Suggestion Stream ADs Footer
  • 97. new App.Views.StreamItem(); model: Status Status model.fetch() this.render() Resharers Comments
  • 98. new App.Views.StreamItem(); model: Status Status model.fetch() this.render() Resharers new App.Views.Resharers()... Comments
  • 99. new App.Views.StreamItem(); model: Status Status model.fetch() this.render() Resharers new App.Views.Resharers()... new App.Views.Comments() this.collection = new Comments([],{ id: status.id Comments }); this.collection.fetch() this.collection.create() this.collection.remove()
  • 100. ... <div id="page-outer"> </div> ... <script id="status-item-template" type="text/template">...</script> <script id="comment-item-template" type="text/template">...</script> ... template/app.html
  • 101. App.Views.Permalink = Backbone.View.extend({ el: oDoc, initialize: function(options) { _.bindAll(this, 'render', 'loadStatus', 'loadResharers', 'loadLikers', 'loadComments'); var self = this; $.ajax('/api/statuses/' + options.id + '?pack=1&comment_count=50&reshare_count=14&like_count=14') .success(function(resp) { self.status = new Status(resp.status, {id: options.id}); self.comments = new App.Collections.Comments(resp.comments, {id: options.id}); self.resharers = new App.Collections.Resharers(resp.reshare_users, {id: options.id}); self.loadStatus(); }) .error(function(resp){ // 404 } }); }, render: function() { return this; }, loadStatus: function() { var view = new App.Views.StreamItem({ model: this.status }); this.loadComments(); this.loadResharers(); oPageContainer.prepend(view.render().el); }, loadResharers: function() { ... }, loadComments: function() { ... } }); public/js/views/permalink.js
  • 102. App.Views.Permalink = Backbone.View.extend({ ... loadComments: function() { var view = new App.Views.Comments({ model: this.status, collection: this.comments }); oPageContainer.prepend(view.render().el); } }); public/js/views/permalink.js
  • 103. App.Views.Comments = Backbone.View.extend({ className: 'comments-manager', template: $('#comments-components-template').html(), title_template: '{{#comments_count}}<h3>{{comments_count}} </h3>{{/comments_count}}', events: { "click .submit" : "submitComment", }, initialize: function(options) { _.bindAll(this,'render', 'loadTitle', 'loadOne', 'loadAll'); this.status = options.status; this.collection.bind('add', this.loadOne); this.collection.bind('remove', this.loadAll); this.collection.bind('reset', this.loadAll); }, render: function() { $(this.el).html(Mustache.to_html(this.template,{ logged_out: !shuo.loggedIn })); this.title = this.$('.comments-title'); this.oBnSubmit = this.$('.submit-area input'); this.comments = this.$('.comments-items'); this.loadTitle(this.status.toJSON()); this.loadAll(); return this; }, loadOne: function(model) { if ( model.isNew() ) { var view = new App.Views.Comment({ model: model }); this.comments.append(view.render().el); } }, loadTitle: function(data) { this.title.html(Mustache.to_html(this.title_template,data)); }, loadAll: function() { public/js/views/comments.js }, this.collection.each(this.loadOne); create: function(e) {
  • 108. { entities: { user_mentions: [], urls: [] } text: " “ ” " created_at: "2011-07-03 09:04:34" source: "douban.com" user: { city: " " icon_avatar: "http://img3.douban.com/icon/ui1000185-2.jpg" statuses_count: 172 uid: "keso" following_count: 1688 url: "" created_at: "2005-04-07 18:01:26" description: "keso http:// blog.donews.com/keso" followers_count: 6178 location: " " small_avatar: "http://img3.douban.com/icon/u1000185-2.jpg" following: false verified: false large_avatar: "http://img3.douban.com/icon/ul1000185-2.jpg" id: "1000185" screen_name: "keso" } id: 83562107 }
  • 109. <script id="comment-item-template" type="text/template"> <div class="comment-item-content" data-user-id="{{#user}}{{uid}}{{/user}}" data-item-id="{{id}}" data- comment-id="{{id}}"> {{#user}} <div class="icon"> <a href="/#{{uid}}"><img src="{{small_avatar}}" alt="{{screen_name}}"/></a> </div> {{/user}} <div class="content"> <p> {{#user}} <a href="/#!/{{uid}}" class="to" title="{{uid}}">{{screen_name}}</a> {{/user}} <span class="comment-time">{{timestamp}}</span> </p> <p> <span class="comment-text">{{{text}}}</span> <a href="" class="icon-comment" title=" "><img src="http://img3.douban.com/anduin/pics/ blank.gif"/></a> </p> </div> </div> </script>