Model
|
Collection
|
View
|
Router
|
Backbone.Model.extend({
initialize: function () {
alert(‘Model
init’);
this.on(‘change:name’,
function () {
var
name = this.get(‘name’);
console.log(name + ‘updated!’);
});
},
id: ‘modeID’,
idAttribute: ‘_id’,
defaults: {
name: ‘Boris’,
age: 21
},
parse: function (response) {
return
response.data;
},
validate: function (attrs) {
if (attrs.name
=== undefined) {
return
‘Error!’;
}
},
url: function () {
return this.urlRoot
+ this.get(‘name’);
},
urlRoot: ‘/get/model/data’
});
var appModel = new Model({
name: ‘Doris’,
age: 23
});
|
Backbone.Collection.extend({
initialize: function () {
alert(‘Collection
init’);
this.on(‘add’,
function(model) { console.log(model.get(‘name’));
});
},
model: appModel,
comparator: function (a,b) {
if
(a.get('name') < b.get('name')) {
return
1;
} else if
(a.get('name') > b.get('name')) {
return
-1;
} else {
return 0;
}
},
parse: function (response) {
return response.data;
},
url: function () {
return
this.urlRoot + ‘/notes’;
},
});
var appCollection = new Collection(); |
Backbone.View.extend({
initialize: function () {
alert(‘View
init’);
this.model.on(‘change’, this.render);
this.model.on(‘destroy’, this.render);
},
model: appModel,
tagName: ‘div’,
id: ‘main’,
class: ‘block’,
el: $(‘#content’),
template: ‘<span class=”open”>Open</span>
and <span class=”close”>Close</span>’,
events: {
‘click .open’:
‘open’,
‘click
.close’: ‘close’
},
open: function (event) {
alert(‘Open’);
},
close: function (event) {
alert(‘Close’);
},
render: function(options) {
this.$el.html(options
+ this.template);
return this;
}
});
var appView = new View();
|
Backbone.Router.extend({
initialize: function () {
alert(‘Router
init’);
},
routes: {
‘’: ‘main’,
‘about’: ‘about’,
‘contacts/:name’: ‘contacts’,
‘other/*data’:
‘data’
},
main: function () {
$(‘body’).html(‘Main’);
},
about: function () {
$(‘body’).html(‘About’);
},
contacts: function (name) {
$(‘body’).html(‘Contact
’ + name);
},
data: function (data) {
$(‘body’).html(‘Data
’ + data);
}
});
var appRouter = new Router();
$(document).ready(function(){
Backbone.history.start();
});
|
четверг, 11 июля 2013 г.
Backbone.js Таблица Model, Collection, View, Router
Подписаться на:
Комментарии к сообщению (Atom)
Комментариев нет:
Отправить комментарий