[Backbone.js] Model에 따른 Table Head 자동 구축

<script>
    var TableHeadModel = Backbone.Model.extend({
        
    });
 
    var TableHeadModel = Backbone.Model.extend({
        initialize: function () {
 
        }
    });
 
    var Book = Backbone.Model.extend({
        initialize: function () {
            this.on("invalid", function (model, error) {
                console.log("**Validation Error : " + error + "**");
            });
            this.on("change", function (a) {
                // 로그를 남기는 여러가지 방법
                console.log('Model Changed');
                if (this.hasChanged('name')) {
                    console.log('The name has changed');
                }
                if (this.hasChanged('author')) {
                    console.log('The author has changed');
                }
                console.log('Changed attributes: ' + JSON.stringify(this.changed));
            });
        },
 
        defaults: {
            name: 'Book Title',
            author: 'No One',
            year: 2000
        },
        // 개발자가 임의로 만든 함수
        printDetails: function () {
            console.log('printDetails 함수 진입');
        },
 
 
        // attribute에 조건을 걸어둠.
        validate: function (attrs) {
            if (attrs.year < 2000) {
                // year attribute가 2000이하면 실행
                return 'Year must be after 2000';
            }
            if (!attrs.name) {
                // name attribute를 지울 경우 실행
                return 'A name must be provided';
            }
        }
    });
 
    var Books = Backbone.Collection.extend({
        model: Book,
        initialize: function () {
            this.on("remove", function (removedModel, models, options) {
                console.log('element removed at ' + options.index);
            });
        }
    });
 
 
    // 비어있는 동적배열 생성
    var bookArray = [];
    console.log('배열생성');
 
    bookArray[0] = new Book({ name: '책01', author: '띠모', year: '2015', exam01: '2342343', exam02: '2343838' });
    bookArray[1] = new Book({ name: '책02', author: '똘뀌', year: '2011', exam01: '2342343', exam02: '2343838' });
    bookArray[2] = new Book({ name: '책16', author: '페트루씨', year: '1965', exam01: '2342343', exam02: '2343838' });
    bookArray[3] = new Book({ name: '책11', author: '존명씨', year: '1965', exam01: '2342343', exam02: '2343838' });
    bookArray[4] = new Book({ name: '책05', author: '루데스씨', year: '1963', exam01: '2342343', exam02: '2343838' });
    bookArray[5] = new Book({ name: '책20', author: '라브리에씨', year: '1967', exam01: '2342343', exam02: '2343838' });
    bookArray[6] = new Book({ name: '또추가', author: '퀠퀠쿠레쿠렠뤸뤠', year: '2015', exam01: '2342343', exam02: '2343838' });
 
    var myBooks = new Books();
 
    myBooks.add(bookArray, { merge: true });
    
 
    //for (var i = 0; i < bookArray.length; i++) {
    //    // merge:true에 대한 기능 설명은 아래에...
    //    myBooks.add(bookArray[i], { merge: true });
    //}
 
    var sortedByName = myBooks.sortBy(function (Book) {
        return Book.get('name');
    });
 
 
    //최상단 Body View
    var bodyView = Backbone.View.extend({
        el: 'body',
        initialize: function () {
            console.log(this.$el);
        }
    });
 
 
    //테이블 헤드 모델 생성
    var firstHead = new TableHeadModel({
        rows: 3,
        cols: 5,
        row_1: {'2_rowspan':3},
        row_2: {'2_colspan':2},
        row_3: {'2_colspan':3}
    });
 
    var tableView = Backbone.View.extend({
        tagName: 'table',
        className: 'table table-bordered',
        initialize: function () {
            this.render();
        },
        render: function () {
            var THEADView = new theadView();
            this.$el.append(THEADView.$el);
 
            var TBODYView = new tbodyView();
            this.$el.append(TBODYView.$el);
 
            console.log('테이블 시작');
        },
        attributes: function () {
            return {
                style: 'width: 900px'
            }
        }
    });
 
    var theadView = Backbone.View.extend({
        tagName: 'thead',
        initialize: function () {
            this.render();
        },
        render: function () {
            var copyModel = [];
            copyModel = bookArray[0].keys();
 
 
 
            // rows의 개수만큼 
            for (var i = 0; i < firstHead.get('rows') ; i++) {
                //var TRView = new trView({ model: { parent: this, modelKeys: copyModel } });
                console.log('calling TRView : ' + i);
                var TRView = new trView({ model: { parent: this, HeadAttributes:firstHead, RowPosition:i } });
                
                this.$el.append(TRView.$el);
            }
        },
        attributes: function () {
            return {
               
            }
        }
    });
 
    var tbodyView = Backbone.View.extend({
        tagName: 'tbody',
        initialize: function () {
            this.render();
        },
        render: function () {
            for (var i = 0; i < myBooks.size() ; i++) {
                var modelObject = myBooks.at(i);
                
                var TRView = new trView({ model: { parent: this, values: modelObject } });
                this.$el.append(TRView.$el);
            }
        }
    });
 
    var trView = Backbone.View.extend({
        tagName: 'tr',
        initialize: function () {
            this.render();
        },
        render: function () {
            if (this.model.parent.tagName == 'tbody') {
                var values = [];
                values = this.model.values.values();
 
                for (var i = 0; i < values.length; i++) {
                    var item = null;
                    item = new tdView({ model: {parent:this, tdValues:values[i]}});
 
                    if (item != null) {
                        this.$el.append(item.$el);
                    }
                }
            }
            else if (this.model.parent.tagName == 'thead') {
                //for (var i = 0; i < this.model.modelKeys.length; i++) {
                //    var item = null;
                //    var keysName = this.model.modelKeys[i];
                //    item = new thView({ model: {parent:this, colum:keysName}});
 
                //    if (item != null) {
                //        this.$el.append(item.$el);
                //    }
                //}
                
                var THCount = this.model.HeadAttributes.get('cols');
                var RowsNumber = this.model.RowPosition + 1;
                var tempKeys = [];
                var tempValues = [];
 
                // 현재 RowPosition과 상위 Row에서 Rowspan한 것들을 확인 후에 TH를 몇 개 출력할건지 지정한다.
                ///////// ROWSPAN건에 대해서는 이 구문은 OK.
                if (this.model.RowPosition != 0) {
                    //for (var i = 0; i <= this.model.RowPosition ; i++) {
                    for (var i = 0; i < this.model.RowPosition ; i++) {
                        var RowAttribute = this.model.HeadAttributes.get('row_' + (i + 1));
 
                        for (var key in RowAttribute) {
                            if (key.indexOf("rowspan") == 2) {
                                // 현재 로우 포지션의 행번호보다 해당열의 rowspan의 값에 따라 THCOUNT의 값을 빼준다.
                                if (this.model.RowPosition <= RowAttribute[key]) {
                                    console.log(RowAttribute[key]);
                                    THCount = THCount - 1;
 
                                    console.log(this.model.RowPosition + ' ' + RowAttribute[key] + ' ' + THCount);
                                }
                            }
                        }
                    }
                }
                ////////////////////////////////////////////////////////////////////////////////////////
                ////////////// colspan과 rowspan의 값을 가져옴과 동시에 TH의 개수를 지정
                ////////////// 
                var count = 0;
                for (var key in this.model.HeadAttributes.get('row_' + RowsNumber)) {
                    tempKeys[count] = key;
                    if (key.indexOf("colspan") == 2) {
                        var tempValue = (this.model.HeadAttributes.get('row_' + RowsNumber)[key]);
                        tempValues[count] = (this.model.HeadAttributes.get('row_' + RowsNumber)[key]);
                        THCount = (THCount - tempValue) + 1;
                    }
                    else if (key.indexOf("rowspan") == 2) {
                        tempValues[count] = (this.model.HeadAttributes.get('row_' + RowsNumber)[key]);
                    }
                    count = count+1;
                }
                /////////////////////////////////////////////////////////////////////////////////////////
 
                for (var j = 0; j < THCount; j++) {
                    var item;
                    var tempRowspanValue = null;
                    var tempColspanValue = null;
 
                    for (var k = 0; k < count; k++) {
                        if (tempKeys[k] != null) {
                            if (tempKeys[k].charAt(0) == (j+1)) {
                                if (tempKeys[k].indexOf("rowspan") == 2) {
                                    tempRowspanValue = tempValues[k];
                                } else if (tempKeys[k].indexOf("colspan") == 2) {
                                    tempColspanValue = tempValues[k];
                                }
                            }
                        }
                    }
 
                    item = new thView({ model: {parent:this, rowspanValue:tempRowspanValue, colspanValue:tempColspanValue} });
 
                    if (item != null) {
                        this.$el.append(item.$el);
                    }
                }
            }
            
        },
        attributes: function () {   
            if (this.model.parent.tagName == 'tbody')
            {
                return {
                    align: 'center'
                }
            }
            else if (this.model.parent.tagName == 'thead')
            {
                return {}
            }
        }
    });
 
    var thView = Backbone.View.extend({
        tagName: 'th',
        initialize: function () {
            this.render();
        },
        render: function () {
            //this.$el.text(this.model.colum);
            this.$el.text('헤드');
        },
 
        attributes: function () {
            return {
                rowspan: this.model.rowspanValue,
                colspan: this.model.colspanValue,
                style: 'text-align:center;'
            }
        }
    });
 
    var tdView = Backbone.View.extend({
        tagName: 'td',
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.text(this.model.tdValues);
        }
    });
 
    $.bodyView = new bodyView();
    $.bodyView.$el.append(new tableView().$el);
    console.log('마지막단');
</script>