Backbone Model and Collection

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 // <script>alert(&#x27xss&#x27)
– get </script>
– 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 // <script>alert(&#x27xss&#x27)
– get </script>
– 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 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])


var Comments = new Comments([{...}]);



Comments.create({text: "It's no big deal!"});



Comments.create({text: "It's no big deal!"});

var comment = new Comment({
text: "It's no big deal!",
});

comment.save();

Comments.add(comment);

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();
}
});




events: {
"mouseenter" : "showActions",
"mouseleave" : "hideActions"
},

},

$(this.el).attr({
});
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);

App.Router.Shuo = Backbone.Router.extend({

routes: {
"" : "home",
":uid" : "profile",
":uid/following" : "following",
":uid/status/:id" : "permalink",
"search/:query" : "search"
},

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",
},

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)




},

$(this.el).attr({
});
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.

Models
Interactive Data Domain-
specific methods

Models Collections
Ordered Sets of Models
specific methods

Models Collections
specific methods

Views
Render HTML/CSS With
Javascript templating

Models Collections
specific methods

Views Router
Render HTML/CSS With Methods For Routing URL
Javascript templating Fragments

App.Routers.Shuo = Backbone.Router.extend({

routes: {
"" : "home",
"comments" : "comments",
"mentions" : "mentions",
":uid" : "profile",
":uid/followers" : "followers",
"search/users/:query" : "user_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

HomeHeader
Navigation

Following

Followers

Suggestion

Stream

ADs

Footer

Status

Resharers

Comments

new App.Views.StreamItem();
model: Status
Status model.fetch()
this.render()

Resharers

Comments

model: Status
this.render()

Resharers new App.Views.Resharers()...

Comments

model: Status
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,
_.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
}
});
},
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",
},


_.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);
},

$(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) {

BackboneJS
MustacheJS
UnderscoreJS

{
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
}

Mustache.to_html(template,data);

BackboneJS
MustacheJS

UnderscoreJS

http://shuo.douban.com/imdonkey

Backbone Model and Collection

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Backbone Model and Collection

Semelhante a Backbone Model and Collection (20)

Último

Último (20)

Backbone Model and Collection