[Backbone.js] 중첩 View를 이용한 Table 출력

이 소스에서 무엇보다 중요한 것은, Table을 이용해서 Backbone의 강점을 끌어내는 것입니다.

저도 제대로 몰라서, 주위 분께 물어물어 이제서야 해결하네요...

이제 중요한건, colspan, rowspan을 이용해서, 셀 병합을 하는 부분과,
솔루션에 맞추어서 이런저런 구성을 View로 만들어 보고, 그에 맞는 출력을 해주는 부분만 남은 것 같습니다.

Javascript로 일일이 뿌려주는 일은 너무 노가다성 작업이 짙어서, 이번 기회에 좋은 스크립트를 알아가네요.

이 글을 보시는 모든 개발자 분들~ 즐거운 개발 되시길 기원 드리겠습니다.

<script>
    var bodyView = Backbone.View.extend({
        el: 'body',
        initialize: function () {
            console.log(this.$el);
        }
    });
 
    var tableView = Backbone.View.extend({
        tagName: 'table',
        className: 'table table-striped',
        initialize: function () {
            this.render();
        },
        render: function () {
            var THEADView = new theadView();
            this.$el.append(THEADView.$el);
 
            var TBODYView = new tbodyView();
            this.$el.append(TBODYView.$el);
        }
    });
 
    var theadView = Backbone.View.extend({
        tagName: 'thead',
        initialize: function () {
            this.render();
        },
        render: function () {
            var TRView = new trView({ model: { parent: this, count: 5 } });
            this.$el.append(TRView.$el);
        }
    });
 
    var tbodyView = Backbone.View.extend({
        tagName: 'tbody',
        initialize: function () {
            this.render();
        },
        render: function () {
            for (var i = 0; i < 3; i++) {
                var TRView = new trView({ model: { parent: this, count: 5 } });
                this.$el.append(TRView.$el);
            }
        }
    });
 
    var trView = Backbone.View.extend({
        tagName: 'tr',
        initialize: function () {
            this.render();
        },
        render: function () {
            for (var i = 0; i < this.model.count; i++) {
                var item = null;
 
                switch (this.model.parent.tagName) {
                    case 'tbody':
                        item = new tdView();
                        break;
                    case 'thead':
                        item = new thView();
                        break;
                }
 
                if (item != null) {
                    this.$el.append(item.$el);
                }
            }
        }
    });
 
    var thView = Backbone.View.extend({
        tagName: 'th',
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.text('헤드');
        }
    });
 
    var tdView = Backbone.View.extend({
        tagName: 'td',
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.text('asdfefef');
        }
    });
    
    $.bodyView = new bodyView();
    $.bodyView.$el.append(new tableView().$el);
</script>