intro to backbone.js

Backbone.js

Slava BelokurskiWeavora Team

Почему не JQuery?

JQuery хранит данные в DOM <li id="itemId_<?php echo $item->id; ?>">View Item Data</li>

Почему не JQuery?

JQuery это лапша из callback-ов $.get(url, function(data){

var items = [];data.each(function(item){

items.push("<li id="itemId"+item.id+>view</li>");});$("li").on('click', function(){

//and more more more....});

});

Да, мы к этому привыкли, и это не сложно, но...

Backbone.js придает структуру веб-приложениям с помощью моделей с биндингами по ключу и пользовательскими событиями, коллекций с богатым набором методов с перечислимыми сущностями, представленийс декларативной обработкой событий; и соединяет это все с вашим существующим REST-овым JSON API.

Backbone это не

● инструмент управления DOM● штука рисующая анимацию● Фреймворк, навязывающий свой Control

Flow● не всё в одном

Для чего это вообще нужно?

Все приложения, рендеринг которых происходит на клиенте

Составляющие

1) Router2) History3) Model4) View

View

Router Model + Collection

Browser

Events

● on● off● trigger class Item extends Backbone.Events

... item.on "alert", callbackitem.trigger "alert", args

Routerclass Controller extends Backbone.Router

routes:"" : "index""!/": "index""!/news": "news""!/music": "music""!/post/:id": "showPost"

index: ->

Views.page.render() if Views.page?

news: ->console.log "news"

music: ->

console.log "music"

showPost: (id)->if Views.postPage?

post = new Post _id: idViews.postPage.setModel postpost.fetch()

А как же индексация?

History

Backbone.history.start()

Model

● Представление данных● Генерация событий● Общение с сервером● Повторное использование

Model (use Backbone.Sync)

Rest Fetch -> HTTP GET /url/idSave(new) -> HTTP POST /urlSave -> HTTP PUT /url/idDelete -> HTTP DELETE /url/id

class Post extends Backbone.ModelurlRoot : '/post'idAttribute: '_id'

Model

Model

post = new Post()post.set title : "post title"post.save() #trigger sync

Collectionclass PostCollection extends Backbone.Collection

model: Posturl: '/post'

posts = new PostCollection()posts.fetch()

Collection

поддерживает все методы Uderscore.js

View

class ColorBoxView extends Backbone.View tagName: 'li' initialize: -> @template = $('#color-box-template').template() @model.bind 'change', @render @model.view = @

render: => $(@el).html $.tmpl @template, @model.toJSON() return @

В результате

● Больший уровень абстракции● Разделение UI и Данных● Избавляемся от колбэков

В результате

● RESTful service based data layer● Events позволяют всё время поддерживать

данные и views в актуальном виде● Просто использовать Template движки● Хорошая система роутинга Всё это обернуто в легковесный JS framework

Зависимости

● Underscore● JQuery or Zepto● Json2.js

Примеры использования

DocumentCloud

LinkedIn Mobile

Foursquare

Basecamp Mobile

Короче круть! ®