Part3

CRUD!

1. Todo item list CRUD

1.1. C-reate

-

1.2. U-pdate

  • 업데이트를 하려면 우선 해당 todo 를 더블클릭하자.

    • 더블클릭 이벤트를 등록해야한다.

  • CSS

  • TodoView 클래스에 이벤트를 추가해주자

  • // renders individual todo items list (li)
app.TodoView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#item-template').html()),
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    this.input = this.$('.edit');
    return this; // enable chained calls
  },
  initialize: function(){
    this.model.on('change', this.render, this);
  },
  events: {
    'dblclick label' : 'edit',
    'keypress .edit' : 'updateOnEnter',
    'blur .edit' : 'close'
  },
  edit: function(){
    this.$el.addClass('editing');
    this.input.focus();
  },
  close: function(){
    var value = this.input.val().trim();
    if(value) {
      this.model.save({title: value});
    }
    this.$el.removeClass('editing');
  },
  updateOnEnter: function(e){
    if(e.which == 13){
      this.close();
    }
   }
});

  • initialize

    • view는 아래 처럼 생성된다.

      let view = new app.TodoView(model);

    • 즉 인자로 model 이 들어가게 되는데, initialize 에서 인자로 들어온 이 model 에 event 를 걸어준다!

    • 이벤트의 종류는 change. 즉 model 에 무언가 변화가 있으면 이벤트 트리거가 동작하고 this.render 함수가 발동한다.

    • 따라서 update를 하면 자동으로 render 함수가 호출이 된다!

  • events

    • events: {
  'dblclick label' : 'edit',
  'keypress .edit' : 'updateOnEnter',
  'blur .edit' : 'close'
},

    • 태그 이름이 label 인 DOM 요소를 더블클릭하면 edit 가 실행된다.

    • 클래스 이름이 edit 인 DOM 요소에서 키 입력 을 감지하면 updateOnEnter 함수를 실행시킨다.

    • 클래스 이름이 edit 인 DOM 요소를 포커싱하고 있다고 포커스를 풀면 close 함수가 실행된다.

  • edit

    • edit: function(){
  this.$el.addClass('editing');
  this.input.focus();
},

    • 현재 수정하고 있는 DOM 요소에 editing 클래스를 붙인다.

      • 브라우저에서 element 로 확인하면 동적으로 변화하는걸 알 수 있음.

      • this.input.focus() 로 커서를 더블클릭한 요소로 옮긴다.

      • 더블클릭 한 DOM 의 자손에 input 이 있는데 이를 선택하고 여기로 focus를 옮기는 것으로 추정된다.

  • close

    • 포커싱을 풀거나 입력이 ENTER 인 경우 실행된다.

    • 포커싱을 풀어도 이전에 수정중이던 데이터는 저장된다.

    • 이후에는 DOM 요소읭 editing 이라는 클래스 이름을 지워준다.

  • updateOnEnter

    • 들어온 키 입력이 ENTER 인지를 판별한다.

1.3. D-elete

  • ktodo 아이템을 지우기 위해서는 remove 버튼을 각각의 아이템 요소 마다 만들어 주면 된다.

    • 그리고 이 버튼 요소에 event를 바인딩 시켜주자.

    • 버튼이므로 버튼의 입력에 대해서 event를 걸면 됨.

  • remove 버튼은 li 태그 각각에 만들어줘야 하니깐 TodoView 클래스에 만들어 주면 된다.

    • <li> ... <button> .... </button> .... </li>

  • 이후에는 initialize 에서 모델에 바인딩을 시켜주자.

    • 모델에 바인딩을 시켜주는 이유는 해당 todo 가 삭제되면 리스트 목록은 다시 출력되어야 하기 때문!

PreviousPart2NextPart4

Last updated