Backbone.js 예제
region html의 app이라는 아이디값을 가진 div를 가르킨다.
initialize 초기화 단계에서 함수가 실행된다. todoCollection이라는 변수에 생성자 함수를 이용하여 TodoCollection을 만들어준다(TodoModel.js라는 파일에 컬렉션이 있고, 그것을 생성)
onStart 돔을 그리는 단계인것같다. Marionette의 Application에 showView메소드를 이용해서 TodoListView를 생성해주고 그안에 객체형태로 컬렉션안에 initialize에서 생성한 컬렉션을 넣어주면 View와 Model이 연결된다. 순서로 보았을때 onStart보다 initialize가 먼저 실행될것이라는것을 알 수 있다.
주석처리 한 부분은 Prototype을 활용한 부분과 같은 역할을 하고, Prototype 체
인의 역할을 명시적으로 표현하기 위해서 지우지 않음.
구성은 2개의 모델과 1개의 컬렉션이있다. 첫번째 TodoItem 은 Input 입력시 생성되는 view의 정보를 가지고있다(Todo 할일,수행여부..). TotalTask는 현재 할일의 총 갯수, 수행여부, 그리고 진행바에 대한 정보를 가지고있다. TodoCollection 은 model로 TodoItem 을 가지고있고 TotalTask는 뷰에서 컬렉션과 연결해주고있다. 즉 TodoCollection은 2가지 모델을 가지고있고 2가지 모델에서 발생하는 이벤트에 관여하고있고 리스닝할 수 있다.
컬렉션,모델 부분은 뷰와 밀접한 연관이 있기 때문에 모델만 본다고해서 이해 하기 힘들다. 그래도 간랸적으로, 얘기해 보자면 다음과 같다.
Collection model로 TodoItem 을 갖는다. url 의 컬렉션 내부 메소드를 통해서 json형식을 가진 데이터를 rest api형태로 가져오고, 모델에 추가한다. 현재는 2개의 json object를 가져온다(할일목록 2개). json의 형태(할일목록 형태)는 주석처리된 부분을 보면 어떤 모양인지 알 수 있다. (url사용시 Backbone.collection에서 내부적으로알아서 get메소드로 api를 받아 오는 것 같다.) add는 기본적으로 Backbone.collection이 가지고있는 예약어인데, 예약어인지 모르고 인위적으로 내가 add를 생성함으로써 override 해버려서 에러가 발생했다. 이럴경우 아래의 Backbone.Collection.prototype.add.apply(this,arguments) 이용함으로써 add가 본래의 역할 수행 할 수 있게 했다. 하지만 굳이 이렇게 쓸 이유는 없다. add대신 addItem이라는 새로운 메소드를 내가 만들어줘서 사용하면 되니까..
TotalTask는 위의 그림처럼 할일목록 진행현황을 보여준다. 소스를 보면 원래 모델은 기본값으로 defaults를 가질 수 있고, 기본적으로 설정해주는 것이 좋다고 한다. (그래야 코드를 살펴볼때 이 모델에는 어떠한 값이 들어가겠구나 알수 있으니까..) all, done, progressive를 가지고 있다. 이부분은 Todomodel.js의 컬렉션에서 직접적으로 모델을 연결해주지않고 뷰딴에서 연결해주었기 때문에 뷰에서 어떤식으로 작업을했는지 자세하게 설명함..
전체적인 뷰를 가지고있는 TodoListView와 child View인 TodoItemView가 있다. export default로 부모 뷰인 TodoListView를 내보내고있다. (TodoListView안에 TodoItemView를 사용하고있는것을 알 수 있음.) 전체적인 html은 아래와 같이 생겼다.
TodoListView가 생성될때 기본적으로 아무 이름이 없는 div로 hbs 템플릿을 감싼다. 하지만 className으로 “main”을 주어서 최상위 div인 “app”아래에 “main”이라는 클래스를 가진 div가 되었고 그아래에 hbs template이 들어간다.childView라는 메소드를 이용하여 TodoItemView를 칠드런 뷰로 넣어주었고, childViewContainer를 이용하여 칠드런 뷰는 childview라는 아이디를 가진 div 아래에서 생성되게 된다.
events는 발생하는 이벤트들을 모아두는 객체로써, 각각의 이벤트가 발생했을때 메소드를 실행시키게 한다. ‘#button’이라는 id를 가진 태그를 클릭시 add메소드 실행, ‘.deleteButton’이라는 클래스 태그를 클릭했을시 remove메소드 실행 등등….
childViewEvents 는 말그대로 childView에서 발생하는 이벤트를 부모뷰에서 듣고 자식의 인자를 받거나, 인자없이 메소드를 실행시킬수 있게한다. 예를들어서 childView에서 모델을 삭제하고싶을때 자신인 ‘this’를 인자로 실어서 triggermethod로 부모에게 자신을 전달, 부모에서 collection.remove(this)를 실행시 그 자식뷰가 사라지게끔..할때 사용하면 유용하다.
onRender는 돔이 생성된후에 호출되는 함수로 initialize같은 부분에서 제이쿼리를 사용시 돔이 생성되기 전이므로 제이쿼리를 사용할 수 없다. 이부분에서 가장 중요한것은 this.totalTaskview 이뷰에 TotalTaskView라는 뷰를 생성해주고 모델에 TotalTask라는 모델을 넣어준다. 모델안에서 컬렉션을 리스닝 할 수 있게 {todoList:this.collection}이라는 객체를 넣어준다. 위의 그림에서 model부분을 보면 initialize:function(option)의 인자로 {todoList:this.collection} 이 들어가게된다. 즉 이 모델에서 this.todoList는 전체 콜렉션을 말함으로써 listenTo를 통해 컬렉션의 모든 변화가 감지했을때에 setTotalTask라는 메소드를 실행하게 한다.
나머지 소스코드들은 대부분 동일함.
