Part4

Router

1.Backbone.Router

• routers 를 사용하지 않고도 앱을 만들수있다.

• 하지만 앱에서 특정한 상태(state) 를 만들고 싶거나, 앱의 특정 위치(location)으로 이동하고 싶다면 reference(link/ URL)가 반드시 필요하다.

• ROUTER는 바로 이런 경우에 사용한다.

• 보통의 JS앱은 라우팅을 hash-tag를 이용해서 구현한다.

  • GMAIL에 접속후 URL을 유심히 살펴보자.

• backbone에서는 이 URL 패턴과 함수를 매칭 시킨다.

  • Rasil에서 했던것처럼 인자를 넘길 수 있다.

• 기본적인 구조는 'route' : 'mappedFunction'

  • 'route' 에 ``* 가 있다면 모든 URL이 여기로 들어온다는 뜻이다.

  • 아래 예시를 보면 `'filter' : 'setFilter'`* 가 있는데

    • ~~#this/is/test/haha 와 같이 들어오면 # 뒤에 오는 모든 값들이 인자가 된다.

    • setFilter 함수의 인자로 this/is/test/haha가 모두 들어가게 된다는 것.

1.1 Initializing the Router

• app.Router = Backbone.Router.extend({
    routes: {
      '*filter' : 'setFilter'
    },
    setFilter: function(params) {
      console.log('app.router.params = ' + params); // just for didactical purposes.
      window.filter = params.trim() || '';
      app.todoList.trigger('reset');
    }
  });
  
  //--------------
  // Initializers
  //--------------
  
  app.router = new app.Router();
  Backbone.history.start();
  app.appView = new app.AppView();

  • 라우터 클래스를 만들고 사용하기 위해서는 먼저 초기화를 시키자

    • 이렇게 한 이후 URL의 마지막에 #This/is/Test 와 같이 입력을 해보자.

    • 입력된 모든 데이터가 params의 형태로 입력되고 콘솔로 출력된다.

  • setFilter

    • 이 함수는 최종적으로 app.todoList.trigger('reset');를 실행한다

    • todoList에 걸어놓은 event 인 addAll 이 실행된다.

    • 여기서 굳이 왜..? window.filter 를 선언하는 걸까?

      • addAll 함수에서 사용한다.

      • fileter 라는 데이터를 window 의 프로퍼티로 만들면 전역함수로 만드는 것과 동일한 효과를 내므로 어디서든 사용할 수 있게 된다.

1.2. Processing the routes

• 현재 예시에서는 주소창에 #아무거나 로 앱을 호출하면 무조건 setFilter 함수가 호출되고 이는 무조건 addAll을 호출한다. (라우팅 주소로 pending 과 completed 를 보내면 아직은 안된다.)

• addAll: function(){
    this.$('#todo-list').html(''); // clean the todo list
    // filter todo item list
    switch(window.filter){
      case 'pending':
        _.each(app.todoList.remaining(), this.addOne);
        break;
      case 'completed':
        _.each(app.todoList.completed(), this.addOne);
        break;
      default:
        app.todoList.each(this.addOne, this);
        break;
    }
  }

• 주소창 입력으로 들어온 값에 따라 다른 함수가 실행이 된다.

  • 기본적으로는 반복을 돌면서 li 태그를 만들어 낸다.

    • 완료된 todo 완료되지 않은 todo 모두가 출력되는 것.

  • pending으로 들어오면 아직 완료되지 않은 todo 들만 출력이 된다.

  • completed로 들어오면 완료된 todo 들만 보인다.

remaining(), completed()

• 이 두 함수들은 model의 completed 속성의 true, false 속성에 따라 값이 결정된다.

• Completed?	True	False
  remaining()	false	true
  completed()	true	false

  즉, 모델 에 디펜던시가 있다. 이전에 모델을 관리하도록 만든게 collection이라고 했다. collection 에다가 관련 메서드를 추가해주자.

• app.TodoList = Backbone.Collection.extend({
    model: app.Todo,
    localStorage: new Store("backbone-todo"),
    completed: function() {
      return this.filter(function( todo ) {
        return todo.get('completed');
      });
    },
    remaining: function() {
      return this.without.apply( this, this.completed() );
    }
  });

  • completed

    • return 문의 뒤쪽부터 읽으면 이해하기가 쉽다.

    • function( todo ) {
        return todo.get('completed');
      };

      • 이 익명함수는 인자로 들어온 todo 모델에서 completed 속성을 return 한다.

      • completed 속성은 true 또는 false 둘 중 하나므로 참 거짓이 return 된다.

    • 이제 this.filter() 를 살펴보자.

      • 이 부분은 잘 모르겠다!

  • remaining

    • without 와 apply 메서드를 체이닝해서 completed 가 false 인 경우를 리턴한다 라고 이해하자...