Local Storage

HTML 5에서 추가된 Web Storage API 의 구성요소라고 한다.
하나는 세션 단위로 데이터를 저장하는 SessionStorage, 만료 기간이 없는 LocalStroage 인데, 모두 Key / Value를 이용해 저장한다.

setItem 과 getItem을 이용하며 사용법은

localStorage.setItem('foo', 'bar');  
localStorage.getItem('foo'); // return 'bar'

key / value 모두 string으로 저장된다.

주의사항

• getItem : 값을 찾지 못하면, 에러 없이 null 리턴
• setItem : 기존 값이 있을경우 덮어 쓴다.

Reference : (http://ohgyun.com/417)

jQuery on

this.$footer.on('click', '#clear-completed', this.destroyCompleted);
list.on('change', '.toggle', this.toggle);
list.on('dblclick', 'label', this.edit);

이렇게 두번째 속성에 대상 지정해서. 여기서 this는 해당 객체를 의미.

Event : blur

포커스를 잃을때.
e.target.blur() 로 강제 발생시킬 수도 있다.

blurOnEnter: function (e) {
    if (e.which === App.ENTER_KEY) {
        e.target.blur();
    }
}

Doublke Exclamation mark

this.$main.toggle(!!this.todos.length);

찾아보니, 해당 값의 진짜 boolean을 나타낸다고 한다.
참조

I can’t understand this code.

toggle: function () {
    App.getTodo(this, function (i, val) {
        val.completed = !val.completed;
    });
    App.render();
},

getTodo: function (elem, callback) {
    var id = $(elem).closest('li').data('id');

    $.each(this.todos, function (i, val) {
        if (val.id === id) {
            callback.apply(App, arguments);
            console.log(arguments);
            return false;
        }
    });
},

이해할 수 없는 코드다 아직은. toggle 이벤트가 발생하면, 현재 토글 된 요소(this)와, 그 요소에 적용할 callback function을 getTodo 함수에 넘겨준다.

getTodo 함수는 인자로 받은 toggle event가 발생한 요소에서, closest.data 를 이용해 id 값을 가져오고, each 문을 돌아서 localStorage 인 todos 에서 값을 찾는다.

그리고 Callback 함수에게 찾은 val(Checked Box)의 completed 속성을 뒤집도록 한다.

# 내가 이해가 안되는 부분은 왜, apply 의 첫번째 인자로 ‘App’ 을 주는가.
-> destory 에서 App.todos 중 요소를 자르기 위해 쓰임

destroy: function () {
    App.getTodo(this, function (i) {
        this.todos.splice(i, 1);
        this.render();
    });
}

jquery closest()

가장 가까운, 셀렉터로 지정된 대상을 가져온다.

jquery data()

javascript apply

App.create()

create: function (e) {
    var $input = $(this);
    var val = $.trim($input.val());

    if (e.which !== App.ENTER_KEY || !val) {
        return;
    }

    App.todos.push({
        id: Utils.uuid(),
        title: val,
        completed: false
    });

    $input.val('');
    App.render();
}

Create Event 가 바인딩 되는부분은

this.$newTodo.on('keyup', this.create);

따라서, $newTodo 에 ‘keyup’ 이벤트가 발생하면, App.create() 가 호출되는데 엔터키일때만 localStorage 인 todos 에 저장이 된다.

event.which

For key or mouse events, this property indicates the specific key or button that was pressed.

특정 키나 버튼이 눌렸는지를, event.which 로 검사할 수 있다.

App.render()

render: function () {
    this.$todoList.html(this.todoTemplate(this.todos));
	this.$main.toggle(!!this.todos.length);
    this.$toggleAll.prop('checked', !this.activeTodoCount());
    this.renderFooter();
    Utils.store('todos-jquery', this.todos);
}

App.todos 는 단지 JSON 배열이기 때문에, Utils.store 에 저장해 주어야 한다.

jquery prop *attr

prop 는 javascript 속성, attr은 HTML 속성 참고