[Script] Backbone.js Tutorial ( 기초강좌 ) - View

출처 :  http://backbonetutorials.com/what-is-a-view/

[Script] Backbone.js Tutorial ( 기초 강좌 ) - Model

What is a View?

- Backbone.js 의 View 는 Model 을 어떻게 display 할 것인지를 명시

- View 관련된 event 를 listen & react 하는 역할.

- Backbone.js 는 jQuery 를 공식적으로 지지하기 때문에, 다른 library 와의 event는 호환이 안 될 수 있다.

  SearchView = Backbone.View.extend({
        initialize: function(){
            alert("Alerts suck.");
        }
    });

    // The initialize function is always called when instantiating a Backbone View.
    // Consider it the constructor of the class.
    var search_view = new SearchView;

 - model 과 마찬가지로, View 도 생성시 initialize 함수가 불린다.

The "el" property

- "el" property 는 browser 에서 생성한 DOM object 를 가르킨다. 모든 Backbone.js 는 "el" property 를 가지고 있다. 만약 설정이 안 된다면 empty div element 가 생성되어 링크된다.

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            alert("Alerts suck.");
        }
    });
    
    var search_view = new SearchView({ el: $("#search_container") });
</script>

- el 이 id=search_container 인 div에 연결되었기 때문에, 이 View 는 search_container 를 Backbone.View 로 관리하게 된다. 당연히 반응하는 event 도 이 el 로 연결된 DOM element 자신과 그의 children 에 관련된 event 만 수신한다.

Loading a template

- Backbone.js 는 Underscore.js 에 dependent 하다. ( micro-templating )

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            // Compile the template using underscore
            var template = _.template( $("#search_template").html(), {} );
            // Load the compiled HTML into the Backbone "el"
            this.el.html( template );
        }
    });
    
    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

 - view가 initialize 되면 render() 함수를 호출하여 el 에 template 를 load 하는 작업을 한다.

Listening for Events

<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            var template = _.template( $("#search_template").html(), {} );
            this.el.html( template );
        },
        events: {
            "click input[type=button]": "doSearch"
        },
        doSearch: function( event ){
            // Button clicked, you can access the element that was clicked with event.currentTarget
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

- 앞서 설명되었듯, event 수신은 el 에 연결된 element 와 그의 children element 에 대해서만 수신 가능하다.

- 이벤트 연결은 View 의 built-in property 인 "events" 에 정의한다. callback function 에는 event 가 전달된다.

events:{ "event_name" event_target : function }

Tips and Tricks

<div id="search_container"></div>

<script type="text/javascript">
     SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            //Pass variables in using Underscore.js Template
            var variables = { search_label: "My Search" };
            // Compile the template using underscore
            var template = _.template( $("#search_template").html(), variables );
            // Load the compiled HTML into the Backbone "el"
            this.el.html( template );
        },
        events: {
            "click input[type=button]": "doSearch"  
        },
        doSearch: function( event ){
            // Button clicked, you can access the element that was clicked with event.currentTarget
            alert( "Search for " + $("#search_input").val() );
        }
    });
        
    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <!-- Access template variables with <%= %> -->
    <label><%= search_label %></label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>

- render() 에서 el 과 template을 연결할 때 _template( html, variables ) 를 통해 variables 를 전달하면, template 에서 <%= variable_name %> 을 통해서 전달받은 variable 에 접근할 수 있다.

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )