[Backbone.js] Table을 뿌려주는 View에 Collection 모델들의 Attributes를 출력.

이제 제가 알아야할 backbone.js의 최종에 거의 도달했습니다.
원래 클라이언트를 하다가 갑자기 맡게 되어, 약간 어안이 벙벙하고, 좀 힘들긴 했는데..

그래도 주위분의 도움으로 만들기는 하네요...

아래 소스는 collection의 model들을 테이블에 뿌려주는 역할을 하는 backbone입니다.

단순 ul, li 태그보다는 훨씬 복잡하고, 더 많은 양을 뿌려줄 수가 있죠~

소스 참고하실분들은 잘 참고 하시고~ 즐겁게 개발하세요~

잡다한 소스가 껴 있을 수도 있습니다.
그런 부분들은 그냥 알아서 필터링 하시고 보세요~

중요한 소스들은 주석으로 설명을 자세히 첨부하였습니다.

<script>
    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' });
    bookArray[1] = new Book({ name: '책02', author: '똘뀌', year: '2011' });
    bookArray[2] = new Book({ name: '책16', author: '페트루씨', year: '1965' });
    bookArray[3] = new Book({ name: '책11', author: '존명씨', year: '1965' });
    bookArray[4] = new Book({ name: '책05', author: '루데스씨', year: '1963' });
    bookArray[5] = new Book({ name: '책20', author: '라브리에씨', year: '1967' });
    bookArray[6] = new Book({ name: '또추가', author: '퀠퀠쿠레쿠렠뤸뤠', year: '2015' });
 
    var myBooks = new Books();
    
 
    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');
    });
    console.log('Sorted Version:');
 
    sortedByName.forEach(function (model) {
        console.log('Book is called ' + model.get('name'));
    });
 
    console.log('Second Library contains ' + myBooks.size() + ' books');
 
 
 
    //최상단 Body View
    var bodyView = Backbone.View.extend({
        el: 'body',
        initialize: function () {
            console.log(this.$el);
        }
    });
 
 
    // DB혹은 Collection구조에 맞게 뿌려줄 테이블
    // google과 한국에 나온 backbone서적, 외국 원서 조차도 대부분, <ul> <li>태그로만 예제를 만듬
    var tableView = Backbone.View.extend({
        tagName: 'table',
        className: 'table table-striped',  //부트스트랩을 참조하여, 테이블 모양을 좀 더 이쁘게 함.
        initialize: function () {
            // tableView의 객체를 생성하자 마자 렌더를 한다.
            this.render();
        },
        render: function () {
            // 렌더를 할 때도 <thead>태그와 <tbody>태그를 바로 만들어 준다.
            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 () {
            // 이곳에 테이블 헤드에 해당하는 모델의 key를 복사해준다.
            // 모델의 attributes를 다룰 때 핵심은 keys()와 values()메소드 입니다.
            // keys와 values메소드는 배열로 값들을 반환해주기 때문에,
            // 배열변수를 만들어 준 후에 값들을 대입해서 사용을 해줍니다.
            var copyModel = [];
            copyModel = bookArray[0].keys();
 
            // 모델의 Attributes 배열을 그대로 넘겨준다.
            // 여기서 핵심은 new trView()안에 있는 model입니다.
            // 뷰끼리 값을 전달 할 때는 이 model을 이용하여 전달이 가능합니다.
            // 색성하는 trView의 부모는 이 thead라는 것을 명시해 준 것이고,
            // modelKeys는 개발자가 임의로 만든 attributes입니다.
            // C언어의 함수로 치자면, 파라미터라고 이해를 하는게 빠르겠네요.
            // 이 modelKeys는 위에 생성한 배열변수 copyModel을 대입해줍니다.
            // 그럼으로써, modelKeys는 배열 타입의 attributes가 되는 것입니다.
            var TRView = new trView({ model: { parent: this, modelKeys: copyModel} });
            this.$el.append(TRView.$el);
        }
    });
 
    var tbodyView = Backbone.View.extend({
        // tbody는 DB혹은 collection에 있는 값들을 직접적으로 출력해줄 곳입니다.
        tagName: 'tbody',
        initialize: function () {
            this.render();
        },
        render: function () {
            // 중요한건 tbody안에서 collection의 가지고 있는 model 수 만큼, TR태그를 생성할 것입니다. 
            // 그래서 for문을 이용하여 위에서 생성한 myBooks collection객체의 사이즈(length)까지 돌립니다.
            for (var i = 0; i < myBooks.size() ; i++) {
                // myBooks의 at메소드는 해당 cid를 가지고 있는 모델을 오브젝트 단위로 통째로 리턴해줍니다.
                // 그래서 루프를 돌면서 해당 모델들을 오브젝트 변수에 대입을 해주는 것이죠.
                // 여기에는 개발자가 임의로 추가한 model attributes들이 들어가 있을 것입니다.
                var modelObject = myBooks.at(i);
                
                // thead View에서도 봤던 문장이 아래에도 있습니다.
                // TR을 생성해주는데, 값을 전달을 모델을 만들어 주고, attributes값들이 들어가 있는,
                // values attributes를 임의적으로 생성을 한다음에 modelObject를 대입해줍니다.
                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 () {
            // TR태그 같은 경우에는 thead에도, tbody 태그에도 모두 사용합니다.
            // 그렇기 때문에, trView를 어디서 호출을 했는지 확인을 하기 위해, tagName을 확인합니다.
            // 우리는 trView객체를 생성할 때, parent 어트리뷰트를 지정해줬기에 tagName값을 가져올 수 있습니다.
            if (this.model.parent.tagName == 'tbody') {  // 이 모델에 부모뷰의 tagName 접근
                var values = [];
                // 우리는 모델에서 values attributes를 추가해주고, myBooks.at()의 값을 넣어주었습니다.
                // myBooks.at()메소드는 해당모델 오브젝트를 그대로 반환해주는 값이라 values도 모델 오브젝트 변수입니다.
                // 그래서 해당 모델 값의 key가 아닌 value들을 values배열에 대입해줍니다.
                // values()메소드도 배열로 값들을 반환한다.
                values = this.model.values.values();
 
                // tbody의 TR태그는 콜렉션과 DB의 값들을 뿌려주기 위한 태그입니다.
                // 즉, 모델들 안에 attributes들이 있고, 각 attributes마다 <TD>태그를 생성하여 넣어주어야
                // 보는 사용자들 입장에서 보기 더욱 편하겠죠? 아래 루프가 바로 그 작업입니다.
                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') {
                // <TBODY>태그는 모델들의 value값들을 출력을 해주었지만,
                // <THEAD>태그는 모델들의 key값을 출력해 주어야 할 것입니다.
                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 thView = Backbone.View.extend({
        tagName: 'th',
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.text(this.model.colum);
        }
    });
 
    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>