четверг, 11 июля 2013 г.

Backbone.js Таблица Model, Collection, View, Router


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



Комментариев нет:

Отправить комментарий