SlideShare a Scribd company logo
1 of 18
Backbone JS
배경리
background.ree@gmail.com
오늘의 목적
저렙이 라이브러리를 이해하는 방식
(feat. undefined:D 강남 2조)
나아가서 Backbone에 대한 흥미…..
소스 훑어보기
Model
View
Collection
Event
Sync, emulateJSON, emulateHTTP.. 등등
Model
• interactive한 데이터 관리로 가장 중요한 역할을 한다
- 동기화(Backbone.sync), JQuery.ajax를 사용한다.
• 각 모델은 고유의 URL을 가진다
Model
var Todo = context.todo = Backbone.Model.extend({
defaults: function() {
return {
title: "empty todo...",
order: Todos.nextOrder(),
done: false
};
},
// Toggle the `done` state of this todo item.
toggle: function() {
this.save({done: !this.get("done")});
}
});
Model
– extend
– constructor / initialize
– get
– set
– escape
– has
– unset
– clear
– id
– idAttribute
– cid
– attributes
– changed
– defaults
– toJSON
– sync
– fetch
– save
– destroy
– Underscore Methods (6)
– validate
– validationError
– isValid
– url
– urlRoot
– parse
– clone
– isNew
– hasChanged
– changedAttributes
– previous
– previousAttributes
fetch (HTTP GET)
save (HTTP POST, PUT)
destroy (HTTP DELETE)
get([attr])
set ([attr])
Collection
• Model의 집합
• 자료구조를 다룰 수 있는 다양한 함수들이 제공된다 (Underscore.js)
• Model과 동일하게 저장소와 동기화 된다
- 각 Model로 발생하는 이벤트는 Collection에게도 동일하게 전달
Collection
var TodoList = Backbone.Collection.extend({
// Reference to this collection's model.
model: Todo,
// Filter down the list of all todo items that are finished.
done: function() {
return this.where({done: true});
},
nextOrder: function() {
if (!this.length) return 1;
return this.last().get('order') + 1;
},
// Todos are sorted by their original insertion order.
comparator: 'order'
});
Collection
– extend
– model
– constructor / initialize
– models
– toJSON
– sync
– Underscore Methods (28)
– add
– remove
– reset
– set
– get
– at
– push
– pop
– unshift
– shift
– slice
– length
– comparator
– sort
– pluck
– where
– findWhere
– url
– parse
– clone
– fetch
– create
fetch
add, create
remove
Underscore Methods(28)
View
• 모델 조작 및 이벤트 처리
- 하나의 Model에 하나의 View를 할당하는 것이 좋다
• 템플릿 처리
View
var TodoView = Backbone.View.extend({
tagName: "li",
template: _.template($('#item-template').html()),
events: {
"click .toggle" : "toggleDone",
"dblclick .view" : "edit",
"click a.destroy" : "clear"
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('done', this.model.get('done'));
this.input = this.$('.edit');
return this;
},
View
var TodoView = Backbone.View.extend({
tagName: "li",
template: _.template($('#item-template').html()),
events: {
"click .toggle" : "toggleDone",
"dblclick .view" : "edit",
"click a.destroy" : "clear"
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('done', this.model.get('done'));
this.input = this.$('.edit');
return this;
},
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= done ? 'c
hecked="checked"' : '' %> />
<label><%- title %></label>
<a class="destroy"></a>
</div>
<input class="edit" type="text" value="<%- title %>" />
</script>
View
– extend
– constructor / initialize
– el
– $el
– setElement
– attributes
– $ (jQuery)
– template
– render
– remove
– delegateEvents
– undelegateEvents
감사합니다
출처 및 참조
http://backbonejs.org/docs/todos.html
http://backbonejs.org
http://underscorejs.org
http://commons.wikimedia.org/wiki/File:Astronaut-in-space.jpg
http://www.groupon.com

More Related Content

Viewers also liked

Writing a massive javascript app
Writing a massive javascript appWriting a massive javascript app
Writing a massive javascript appJustin Park
 
Backbone js in action
Backbone js in actionBackbone js in action
Backbone js in actionUsha Guduri
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Richard Powell
 
BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsJoseph Khan
 
Backbonejs
BackbonejsBackbonejs
BackbonejsSam Lee
 
Backbone js and requirejs
Backbone js and requirejsBackbone js and requirejs
Backbone js and requirejsChi-wen Sun
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCVisual Engineering
 

Viewers also liked (13)

Writing a massive javascript app
Writing a massive javascript appWriting a massive javascript app
Writing a massive javascript app
 
Backbone js in action
Backbone js in actionBackbone js in action
Backbone js in action
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Backbonejs Full Stack
Backbonejs Full StackBackbonejs Full Stack
Backbonejs Full Stack
 
BackboneJS + ReactJS
BackboneJS + ReactJSBackboneJS + ReactJS
BackboneJS + ReactJS
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Backbonejs
BackbonejsBackbonejs
Backbonejs
 
Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.
 
BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applications
 
Backbonejs
BackbonejsBackbonejs
Backbonejs
 
Backbone js and requirejs
Backbone js and requirejsBackbone js and requirejs
Backbone js and requirejs
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
 

Similar to Undefined 2월발표 backbonejs

[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기Gyutae Jo
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storageJinKyoungHeo
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수NAVER D2
 
Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)beom kyun choi
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development지수 윤
 
Cappuccino fundamental
Cappuccino fundamentalCappuccino fundamental
Cappuccino fundamentalJeongHun Byeon
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기우영 주
 
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Kenneth Ceyer
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기Jeado Ko
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Jiam Seo
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Kyoung Up Jung
 
Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive
Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive
Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive Elasticsearch
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
Node.js and react
Node.js and reactNode.js and react
Node.js and reactHyungKuIm
 

Similar to Undefined 2월발표 backbonejs (20)

[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
 
Xe hack
Xe hackXe hack
Xe hack
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storage
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
 
Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)Ji 개발 리뷰 (신림프로그래머)
Ji 개발 리뷰 (신림프로그래머)
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development
 
Swt J Face 2/3
Swt J Face 2/3Swt J Face 2/3
Swt J Face 2/3
 
Cappuccino fundamental
Cappuccino fundamentalCappuccino fundamental
Cappuccino fundamental
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
 
Hacosa j query 3th
Hacosa j query 3thHacosa j query 3th
Hacosa j query 3th
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.
 
Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive
Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive
Partner Story(Megazone): 금융사 실전 프로젝트 DeepDive
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 

Undefined 2월발표 backbonejs

  • 2.
  • 3.
  • 4. 오늘의 목적 저렙이 라이브러리를 이해하는 방식 (feat. undefined:D 강남 2조) 나아가서 Backbone에 대한 흥미…..
  • 6.
  • 7. Model • interactive한 데이터 관리로 가장 중요한 역할을 한다 - 동기화(Backbone.sync), JQuery.ajax를 사용한다. • 각 모델은 고유의 URL을 가진다
  • 8. Model var Todo = context.todo = Backbone.Model.extend({ defaults: function() { return { title: "empty todo...", order: Todos.nextOrder(), done: false }; }, // Toggle the `done` state of this todo item. toggle: function() { this.save({done: !this.get("done")}); } });
  • 9. Model – extend – constructor / initialize – get – set – escape – has – unset – clear – id – idAttribute – cid – attributes – changed – defaults – toJSON – sync – fetch – save – destroy – Underscore Methods (6) – validate – validationError – isValid – url – urlRoot – parse – clone – isNew – hasChanged – changedAttributes – previous – previousAttributes fetch (HTTP GET) save (HTTP POST, PUT) destroy (HTTP DELETE) get([attr]) set ([attr])
  • 10. Collection • Model의 집합 • 자료구조를 다룰 수 있는 다양한 함수들이 제공된다 (Underscore.js) • Model과 동일하게 저장소와 동기화 된다 - 각 Model로 발생하는 이벤트는 Collection에게도 동일하게 전달
  • 11. Collection var TodoList = Backbone.Collection.extend({ // Reference to this collection's model. model: Todo, // Filter down the list of all todo items that are finished. done: function() { return this.where({done: true}); }, nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; }, // Todos are sorted by their original insertion order. comparator: 'order' });
  • 12. Collection – extend – model – constructor / initialize – models – toJSON – sync – Underscore Methods (28) – add – remove – reset – set – get – at – push – pop – unshift – shift – slice – length – comparator – sort – pluck – where – findWhere – url – parse – clone – fetch – create fetch add, create remove Underscore Methods(28)
  • 13. View • 모델 조작 및 이벤트 처리 - 하나의 Model에 하나의 View를 할당하는 것이 좋다 • 템플릿 처리
  • 14. View var TodoView = Backbone.View.extend({ tagName: "li", template: _.template($('#item-template').html()), events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear" }, initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done', this.model.get('done')); this.input = this.$('.edit'); return this; },
  • 15. View var TodoView = Backbone.View.extend({ tagName: "li", template: _.template($('#item-template').html()), events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear" }, initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done', this.model.get('done')); this.input = this.$('.edit'); return this; }, <script type="text/template" id="item-template"> <div class="view"> <input class="toggle" type="checkbox" <%= done ? 'c hecked="checked"' : '' %> /> <label><%- title %></label> <a class="destroy"></a> </div> <input class="edit" type="text" value="<%- title %>" /> </script>
  • 16. View – extend – constructor / initialize – el – $el – setElement – attributes – $ (jQuery) – template – render – remove – delegateEvents – undelegateEvents