[번역] 파 트 4 - FlickrView: 설정 보기 구현

영문 원본 링크:
http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part4/
전편
FlickerView: Implementing FeedView 저 희 는 Feed view 를 실현 하고 JSON 이 요청 한 데 이 터 를 사용 하여 ScrollabeView 를 업데이트 합 니 다.이 편 은 Settings view 가 각종 입력 위 젯 (TextBox, Switch, RadioButton) 의 get 과 set 를 어떻게 처리 하 는 지, 그리고 점프 이 벤트 를 사용 하 는 지 에 주목 합 니 다.
SettingsView 속성
우 리 는 작은 위 젯 참조 와 현재 언어 선택 만 유지 해 야 합 니 다.

return declare([ScrollableView], {
    feedView: '',
    tagInput: '',
    selectSwitch: '',
    selectedLanguage: '',
//...

SettingsView 시작
우리 가 FeedView 에서 시작 하 는 방법 과 같이: 부모 호출 방법 과 속성 초기 화:

startup: function () {
    this.inherited(arguments);
    this.feedView = registry.byId("feed");
    this.tagInput = registry.byId("tags");
    this.selectSwitch = registry.byId("select");
    // ...
}

동시에 유용 한 getters 와 setters 방법 을 추가 합 니 다.

setTags: function (tags) {
    this.tagInput.set('value', tags);
},
getTags: function () {
    return this.tagInput.get('value');
},
setTagMode: function (tagmode) {
    this.selectSwitch.set('value', (tagmode === "all") ? "on" : "off");
},
getTagMode: function () {
    return (this.selectSwitch.get('value') === "on") ? "all" : "any";
}

dojox / mobile / switch 는 두 가지 상태 가 있 습 니 다. on 과 of. 우 리 는 모든 설정 을 on 상태 에 대응 하고 ANY 는 off 상태 에 대응 하려 고 합 니 다.
계속 시작 하 는 방법 입 니 다. 사용자 가 단일 선택 항목 을 클릭 할 때 선택 한 언어 를 유지 하 는 방법 을 만 듭 니 다.dojo / on 의 이 강력 한 특성 은 이 기능 을 실현 할 수 있 습 니 다.
even delegation with selector .

// handler to record the selected feed language
this.on("[name=feedLanguage]:click", lang.hitch(this, function (e) {
    this.selectedLanguage = e.target.value;
}));

이제 뭐 해요?
Done 단 추 를 추가 하 는 방법:

프로 그래 밍 전환 Feed View

사용자 가 최소한 하나의 설정 을 수정 할 때 강제로 보기 새로 고침

// handler to update search query parameters when done button is selected
registry.byId("doneButton").on("click", lang.hitch(this, function () {
    // we are done with the settings: transition to FeedView
    this.performTransition("feed");
    // check if anything changed in the setting view
    if (this.getTags() !== flickrview.QUERY.tags ||
        this.getTagMode() !== flickrview.QUERY.tagmode ||
        this.selectedLanguage !== flickrview.QUERY.lang) {
        // update QUERY
        flickrview.QUERY.tags = this.getTags();
        flickrview.QUERY.tagmode = this.getTagMode();
        flickrview.QUERY.lang = this.selectedLanguage;
        // force FeedView list refresh
        this.feedView.refresh()
    }
}));

프로 그래 밍 이 이 루어 진 변환 이기 때문에 작은 위 젯 자체 의 자동 변환 기능 을 끄 고 moveto: '\ #' 을 사용 합 니 다.

<!-- Settings view -->
<div id="settings"
    data-dojo-type="flickrview/SettingsView">
    <div data-dojo-type="dojox/mobile/Heading"
    data-dojo-props="fixed: 'top', label: 'Settings'">
        <span data-dojo-type="dojox/mobile/ToolBarButton"
            id="doneButton"
            data-dojo-props="label:'Done', moveTo:'#', transition:'none'" style="float:right;"></span>

마지막 단계 가 완성 되 었 다!
응답 변환 이벤트
Dojo Mobile 에서 그룹 제공
관련 이벤트 변환 시작 방법 에서 이벤트 beforetrationin 의 처리 방법 을 설정 하여 설정 보기 로 전환 할 때 알림 을 받 습 니 다.

// handler to get notified before a transition to the current view starts
this.on("beforeTransitionIn", lang.hitch(this, function () {
    this.setTags(flickrview.QUERY.tags);
    this.setTagMode(flickrview.QUERY.tagmode);
    this.selectedLanguage = flickrview.QUERY.lang;
    registry.byId(this.selectedLanguage).set('checked', true);
}));

이 처리 방법 에서 저 희 는 보기 의 입력 위 젯 을 업데이트 하고 QUERY 대상 에서 실제 값 을 가 져 옵 니 다.
청소 코드
이 튜 토리 얼 의 앞부분 에서 우 리 는 먼저 모델 응용 을 만 들 었 습 니 다. 이것 은 가장 좋 은 실천 입 니 다. 모델 부터 빠 르 고 간편 하 게 사용자 체험 을 할 수 있 습 니 다.
HTML 의 모델 코드 제거
현재 우리 의 응용 이 이미 완성 되 었 기 때문에 모든 정적 모델 코드 를 제거 할 수 있다.이렇게 하면 코드 의 양 을 줄 이 고 깨끗 한 코드 를 얻 을 수 있다.

FeedView: 목록 항목 을 제거 합 니 다.

DetailView: 정적 설명 을 제거 합 니 다.

캐 시 를 막 는 메타 태그 제거
개발 할 때 사용 하 는 캐 시 차단 탭 을 제거 하여 장치 에 캐 시 를 허용 합 니 다.

<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

성 공 했 어!
축하!당신 은 이미 완전한 Dojo Mobile 응용 프로그램 을 개 발 했 습 니 다. 다음 편 (본 튜 토리 얼 마지막 편) 은 어떻게 응용 을 제품 화 하 는 지 알려 줄 것 입 니 다.
View Demo
원본 코드 다운로드
다운로드 하 다.
Part 4 - FlickrView: Implementing SettingsView .
============================================
Part 4 END
next
Part 5 - Build FlickrView for production