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://backbonejs.org/#View

Backbone.js

 

https://stackoverflow.com/questions/22304100/backbone-this-el-vs-this-el

Backbone this.el vs this.$el

 

https://stackoverflow.com/questions/16591359/backbone-js-update-view-on-model-change

backbone js, Update view on model change

 

https://phsun102.tistory.com/136

Backbonejs - Model의 사용법