Backbone.js 중첩뷰 && Table생성

백본 프로젝트를 들어갔는데...
웹 언어를 많이 해보지 않아서.. 멘붕...

그래서, 언어 적응차 기초적인 것부터 해 나가고 있는데...

구글링을 해도 관련 예제들이 많지는 않다.


테이블과 관련된 모든 예제들은 Table택 혹은 tr태그 뷰를 1개만 생성하고,
tr태그를 수시로 append하는 방식을 보여주고만 있었다.

이 방식이 싫어서, table, tr, td뷰를 다 따로따로 만들고,
<table> <-- <tr> <-- <td> 를 계속 물려 가는 방식으로 구조를 만들어 보고 싶어서,
이것저것 시도를 해보았다.

아래 소스는 거기에 대한 가장 기초적인 Backbone 소스이다.

<table id="exam-table" border="1"></table>
<!-- Backbone.js -->
<script>
    //모델 생성
    var Member = Backbone.Model.extend({
        defaults: {
            name: 'The Rock'
        }
    });
 
 
    // Table을 가리키는 view
    var TableView = Backbone.View.extend({
        el: '#exam-table',
 
        initialize: function () {
            // TableView를 생성 하자마자 Render를 호출
            this.render();
        },
 
        render: function () {
            // tr태그를 만드는 View를 생성 및 호출
            var trView = new TRView();
            this.$el.append(trView.$el);
        }
    });
 
 
    // Table태그 내에 tr태그 생성
    var TRView = Backbone.View.extend({
        tagName: 'tr',
 
        initialize: function () {
            // TableView와 마찬가지로 바로 render 호출
            this.render();
        },
        render: function () {
            var tdView = new TDView();
            this.$el.append(tdView.$el);
            //this.$el.append();
        }
    });
 
 
    // tr태그 내에 td태그 생성
    var TDView = Backbone.View.extend({
        tagName: 'td',
 
        initialize: function () {
            //this.model.bind('change', this.render);
            this.render();
        },
 
        render: function () {
            // model을 생성 후, td안에 model의 내용물을 Print한다.
            var md = new Member();
            this.$el.append('<font size="5">' + md.get('name') + '</font>');
 
            // append 대신에 아래 주석과 같이 text로 쓸수도 있다.
            // 하지만, text는 html태그도 text로 인식을 해서, 오직 텍스트만 입력이 가능하다.
            //this.$el.text(this.model.get('name'));
        }
    });
 
    var bandView = new TableView();
</script>