일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- javascript
- Go
- Babel
- mariadb
- nginx
- 블레이드 템플릿
- webpack
- 기초 수학
- Machine Learning
- Redux
- SQL
- React
- laravel
- AWS
- docker
- CentOS
- python
- linux
- nodejs
- NCP
- rabbitmq
- fastapi
- deep learning
- Redis
- phpredis
- php
- For
- Node
- Backbone.js
- Switch
- Today
- Total
개발일기
Backbonejs - View생성 및 렌더링 본문
1. View 객체 생성 및 메서드
import Backbone from 'backbone';
const FruitView = Backbone.View.extend({
el: "#backbone-view", // 렌더링할 DOM 요소
template: "<h1>Orange Yummy!</h1>", // 템플릿
initialize: function() { // 초기화 메서드
console.log('view init');
},
render: function() { // 렌더링 메서드
this.$el.html(this.template)
}
});
const fruitView = new FruitView(); // 객체 생성
Backbone.View.extend({ }); 를 통해 뷰를 생성할 수 있다. 뷰를 생성한 후, new 연산자를 통해 뷰 객체를 생성하여 사용한다.
- el : 렌더링할 DOM 요소를 입력한다. CSS 셀렉터에 따라 id는 #, class는 .을 붙여 입력한다. el을 사용할 경우, 이미 생성된 DOM 요소를 지정해야 한다.
- template : 렌더링할 템플릿 요소를 입력한다. 위와 같이 직접 HTML 태그를 입력해도 되고 html파일을 import 하여 템플릿을 가져와 사용할 수 있다.
- initialize : 뷰가 처음 생성될 때, 실행되는 메서드이다.
- render : 뷰를 렌더링할 때, 실행할 코드를 작성한다.
1-1. View의 DOM 요소 생성
import Backbone from 'backbone';
const FruitView = Backbone.View.extend({
tagName: 'div', // HTML 태그종류 - 입력하지 않을 경우 div로 생성
className: 'fruit-class', // 클래시명
id: 'fruit-id', // 아이디값
});
const fruitView = new FruitView();
console.log(fruitView.el); // <div id="fruit-id" class="fruit-class"></div>
- tagName : 생성할 DOM 요소의 HTML태그를 나타낸다. 이 메서드를 입력하지 않은 경우, div태그로 DOM 요소가 생성된다.
- className : class 명을 나타낸다.
- id : id값을 입력한다.
tagName, className, id를 입력한 후, View 객체를 생성하여 콘솔에 el값을 찍어보면 각 속성 요소를 가진 HTML태그가 콘솔에 찍힌 것을 확인할 수 있다. View 렌더링시, 해당 DOM요소에 템플릿 요소가 들어가 렌더링되는 것을 확인할 수 있다.
1-2. View의 DOM 요소 삭제
fruitView.remove();
remove()를 통해 생성된 View를 삭제할 수 있다. 해당 View 객체로 렌더링된 DOM 요소를 삭제하며 해당 객체에 연결된 이벤트들 또한 실행되지 않게된다.
2. View template 생성
2-1. 직접 템플릿 추가
const FruitView = Backbone.View.extend({
template: "<h1>Orange Yummy!</h1>",
});
위와같이 template 메서드에 HTML 태그를 직접 작성하여 템플릿을 추가할 수 있다.
2-2. underscore.js로 생성된 템플릿 추가
// fruit.js
import Backbone from 'backbone';
import _ from 'underscore';
import FruitHTML from './fruit.html';
const FruitView = Backbone.View.extend({
template: _.template(FruitHTML).html,
});
<!-- fruit.html -->
<div>fruit.html <%= name %> </div>
underscore 요소가 들어간 fruit.html 파일을 import하여 FruitView의 템플릿으로 지정하였다. FruitView가 렌더링될 때, 넘긴 데이터를 바탕으로 일치하는 underscore 요소에 데이터가 대입되어 렌더링이 된다.
this.tempalte({ name: 'mango' })
View를 렌더링할 때, 지정할 템플릿에 위와같이 데이터를 대입하면 fruit.html의 name에는 mango라는 값이 대입되어 렌더링이 된다. 이와같은 방법으로 템플릿에 모델 속성 또는 컬렉션 값을 넘겨 알맞은 위치에 데이터를 대입시켜 렌더링을 진행할 수 있다.
3. View 렌더
import Backbone from 'backbone';
const FruitView = Backbone.View.extend({
el: "#fruit-view", // 렌더링할 DOM 요소
template: "<h1>Orange Yummy!</h1>", // 템플릿
initialize: function() { // 초기화 메서드
},
render: function() { // 렌더링 메서드
this.$el.html(this.template)
}
});
const fruitView = new FruitView(); // 객체 생성
fruitView.render(); // 렌더링
render() 메드를 통해 el태그의 DOM요소에 템플릿 코드를 렌더링한다. 즉, id값이 fruit-view인 태그에 Orange Yummy!라는 h1태그를 렌더링한다.
- this.$el.thml( this.template ) : jQuery로 해당 el요소에 html을 렌더링한다는 것을 뜻한다.
4. View 이벤트 할당
View로 생성된 DOM 요소들의 클릭, 더블클릭, 블러 등의 이벤트들을 감지하여 특정 함수를 실행하도록 할 수 있다.
import Backbone from 'backbone';
const FruitView = Backbone.View.extend({
el: ".fruit-view",
template: "<button class='fruit-btn'>fruit button</button>",
initialize: function() {
},
events: { // 이벤트 생성
'click .fruit-btn' : 'fruitClick',
// class명이 fruit-btn인 버튼을 클릭하면 fruitClick 함수 실행
},
render: function() {
this.$el.html(this.template)
},
fruitClick: function() { // 이벤트 콜백함수
console.log('fruit click!!!')
}
});
const fruitView = new FruitView();
fruitView.render();
- events : 이벤트 목록을 나열한다. click, dbclick, change, blur 등 다양한 이벤트를 추가하여 함수를 할당할 수 있다.
- fruitClick : 직접 생성한 커스텀 함수 이름이다. 콜백 함수 이름을 다르게하여 생성할 수 있으며 해당 함수가 호출되면 실행된다.
render()로 생성된 fruit button을 클릭하면 이벤트목록에 따라 fruitClick이라는 함수가 실행된다.
5. Model과 View 결합
// fruit-model.js
import Backbone from 'backbone';
export const FruitModel = Backbone.Model.extend({
defaults: {
name: 'mango',
price: 1000
}
}); // model export
// fruit-view.js
import Backbone from 'backbone';
import _ from 'underscore';
import { FruitModel } from './fruit-model.js'; // fruit model을 import하여 사용
const fruitModel = new FruitModel();
const FruitView = Backbone.View.extend({
el: ".fruit-view",
template: _.template("<%= fruitName %>"),
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.template({ fruitName: fruitModel.get('name') }))
},
});
const fruitView = new FruitView();
- this.template({ name: fruitModel.get('name') }) : underscorejs로 생성된 템플릿을 렌더링할 때 전달할 fruitName값을 설정한다. fruitModel의 name 속성으로 설정하여 View가 렌더링될 때, 초기에는 mango라는 텍스트가 나오는 것을 확인할 수 있다.
fruitModel.set("name", "orange");
fruitModel.set("name", "banana");
// ... 모델의 name 속성값 변경
그 후, 모델의 name 속성을 변경하는 버튼 이벤트 등을 생성하여 속성을 변경하면 fruitName이 변경되는 것을 확인할 수 있다. 즉, 모델과 뷰를 결합 후, 속성값의 변경을 감지하여 부분요소만 렌더링할 수 있도록 구현할 수 있다.
참고 사이트 :
https://stackoverflow.com/questions/22304100/backbone-this-el-vs-this-el
https://stackoverflow.com/questions/16591359/backbone-js-update-view-on-model-change
https://phsun102.tistory.com/136
'Javascript > Backbone.js' 카테고리의 다른 글
Backbonejs - Router로 URL 생성하기 (0) | 2023.01.28 |
---|---|
Backbonejs - 이벤트에 따른 콜백함수 호출하기 (0) | 2023.01.21 |
Backbonejs - Collection으로 Model 그룹 활용 (0) | 2023.01.21 |
Backbonejs - Model의 사용법 (0) | 2023.01.20 |
Backbonejs - 요소의 정의 및 설치 (0) | 2023.01.20 |