Backbone에서 Prototype 사용 예제.

백본에서 투두앱을 만들던 도중 발생했던 문제가 있다. compositeView에서 inputButton을 누르면 할일목록을 추가하는 부분이다. 추가하면 객체가 생성되는데 그안에는 id, title, content, link, regDate,done이 들어간다. 사실상 인풋에 적는 값은 title만 들어가므로 다른것들은 빈값이고 title만 들어간다. 이 로직을 view에서 처리하게되면 코드가 지저분해져서 collection부분에서 따로 처리하도록 로직을 구현했다. 문제는 여기서 발생했다. 우선 아래에서 첫번째 코드는 view에서의 코드이고, 두 번째 코드는 collection에서의 코드이다.

compositeView에서 input버튼을 클릭시 add라는 함수가 발생한다. 그안에는 this.collection.addItem(“this.ui.myInput.val()”)가 있는데 이것은 컬렉션의 addItem이라는 function을 발생시킨다. 원래는 addItem이라는 이름대신에 add라는 이름을 사용했고 여기서 에러가 발생했다. 그 이유는 컬렉션의 add라는 이름은 예약어 였기 때문인데 Collection에서의 add는 Model에 어떠한 값을 추가하는 기능을 한다. 그러므로 addItem으로 변경해서 override를 방지하였다. 그런데 여기서 만약에 add라는 이름을 그냥 사용하고 싶다면 어떻게 해야할까? Backbone.Collection.prototype.add.apply(this, arguments) 를 사용하면 된다. add함수는 기본적으로 Backbone.Collection이 가지고 있는 메소드고, add를 오버라이드할 경우 내가 설정한 add로 작동을하게된다(즉, Collection의 기본 add가 작동하지않게됨.) 그러므로 add함수를 Collection내부에서 내가 임의로 생성할 경우, prototype.add.apply함수를 이용하여 기본 백본의 add를 수행할 수 있게 해주는 것이다. 즉, 이렇게 사용하는것보다 add는 예약어 이기때문에 addItem이라는 함수를 만들어줘서 사용하는 것이 편리하다.

뷰에서 인풋값을 입력하면, this.collection의 내가 만들어준 addItem에 인풋값이 들어간다. addItem함수가 Collection에서 발생하면 this.add(this.collection.add => collection이 가지고있는 내부 예약어인 add)를 통해 내가 model에 넣어주고싶은 객체를 반영.