jQuery Mobile 로 만든 To-Do List 분석하기 04

제가 받은 이 To-Do List 소스코드가 있는 곳을 찾았습니다.

여기로 가시면 보실 수 있으세요.

제가 이전 글에서 소스코드를 올렸나요?

만약 올렸다면 그건 잘 못 된 소스코드일 겁니다. 제가 잘 못 알았었나봐요.

위 링크를 따라 가시면 설명과 함께 소스코드를 받아 보실 수 있습니다.

그럼 to-do.js를 계속 분석 해 볼까요?

var model = new Model(),  listHeaders = [];

여기까지 했죠?

이건 뭔 뜻인지 제가 좀 헛갈립니다. 자바스크립트 문법을 잘 몰라서.

아마 Model() 의 객체를 model 변수에 담는데 이게 그 안에 배열이 있으니까 listHeaders 에 그 내부의 배열을 담나 봅니다.

좀 이상하긴 한데 머 아님 말구요.

다음 소스 분석하다 보면 답이 나오겠죠 뭐.

그 다음은 getListHeaders() 함수인데요.

$().each 메소드가 나왔습니다. jQuery 메소드죠.

이 메소드의 API는 위에 링크 걸어 놨는데요. 자세히 설명 돼 있습니다.

    (function getListHeaders() {
        $("#todoList > li[data-priority]").each(function() {
            listHeaders[parseInt($(this).attr("data-priority"))] = $(this);
        });
    })();
이 의미는 id가 todoList인 곳의 li 에서 data-priority 별로 정보를 받아서 listHeader에 그 값을 넣는 겁니다.

그러면 priority 별로 데이터들이 모이겠네요.

그 다음은 템플릿 플러그인을 사용하는 함수가 나옵니다.

    var renderItemElement = function(item) {
        return $.tmpl("<li data-icon=\"delete\" class=\"item\"><a>${text}</a></li>", item)
            .data("item", item)
            .insertAfter(listHeaders[item.priority]);
    };

이 의미는 listHeader 다음에 data-icon 을 delete로 하고 class를 item으로 하는 그리고 ${text} 가 브라우저에 표시되는 그런 패턴을 삽입하라는 겁니다.

첫번째 화면에 입력한 값이 들어가면 각 priority 아래에 그 내용들이 들어가는데 그 내용들에 대한 탬플릿을 추가하는 겁니다.

Sample Item #1 이 ${text} 이고 그 오른쪽에 data-icon = delete 가 되서 X 표시가 있죠? 이 라인을 만드는 함수 입니다.

다음은 id 가 createButton 인것이 클릭 되면 어떤 동작을 하는 함수인데요.

    $("#createButton").click(function() {
        var priority = parseInt($("#todoUrgency").val()),
            item = model.create($("#todoDescription").val(), priority);

        renderItemElement(item);

        $("#todoList").listview("refresh");
        $("#todoUrgency").val(model.PRIORITY.NORMAL.toString()).trigger("change");
        $("#todoDescription").val("");       
    });

두 번째 화면의 Create 버튼이 클릭 되면 todoUrgency 가 id 인 곳의 값을 받아서 숫자로 형변환을 한 다음에 이것을 priority 변수에 넣습니다. 그리고 id가 todoDescription인 곳의 값을 받아서 그 priority와 함께 var Model = function() {} 함수 안에 있는 this.create 함수를 실행하는 겁니다. 

model.create()를 불러왔죠?

여기서는 인수로 받은 text,priority 값을 key, value 형태로 result에 담고 이것을 items에 push 합니다.

그리고 나서 save() 함수를 불러오는데 이 부분에서 쿠키를 만들어 주는 겁니다.

그러니까 두번째 화면에서 클릭하면 그 값들을 parsing 하고 변수에 담아서 items에 push 하고 이것을 쿠키로 만들어 지는 것 까지 자동적으로 이뤄지네요.

쿠키를 만든 다음엔 renderItemElement에 방금 만든 item을 보내서 X 표시가 있어서 데이터를 delete 할 수 있는 탬플릿을 만들구요. 

jQuery의 .listview() 메소드를 이용해서 #todoList 리스트 뷰를 refresh 합니다.

그리고 나서 두번째 페이지의  form 의 각 값들을 초기화 시키는 군요.

다음 함수의 .delegate() 도 jQuery 함수인데요. 

첫번째 인수를 클릭했을 때 어떤 일을 하라고 할 때 사용되는 겁니다.

    $("#todoList").delegate("li.item", "click", function() {
        model.remove($(this).data("item"));
        $(this).slideUp(function() {
            $(this).remove();
        });
    });

즉 #todyList의 li.item 을 클릭하면 model의 remove를 실행하는 군요.

그럼 해당 아이템은 없어지고 그 아래 아이템들은 slideUp 되도록 하는 겁니다.

마지막 함수는

    (function renderExistingItems() {
        $(model.getItems()).each(function() {
            renderItemElement(this);
        });

        $("#todoList").listview("refresh");
    })();

입니다.

model에 있는 getItems를 호출해서 .each() 메소드 처리를 하는 군요.

아까 처럼 각각 탬플릿 화 하는 겁니다. x표가 들어간 item을 만드는 거죠.

그리고 #todoList 리스트 뷰를 refresh 합니다.

지금까지 소스를 따라가면서 해석 해 봤는데요.

생각보다 쉬운건 아니네요.

자바스크립트나 jQuery 메소드들에 대해서 계속 공부하고 실습하고 해야 익숙해 질 것 같습니다.

jQuery Mobile 만 봤을 때는 아주 쉬워 보였는데 이걸 가지고 어떤 앱을 만들려니까 여러가지 배울것들이 더 많군요.

당분간 계속 샘플 앱 소스를 분석해야겠어요.