Intro to Backbone.js
-
Upload
weavora -
Category
Technology
-
view
859 -
download
3
description
Transcript of 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
Короче круть! ®