여러 상태가있는 핸들 막대 템플릿

Question

세 가지 상태가있는 Ember 뷰를 작성하려고합니다. 특히 "제출"에서 "저장 중 ..."에서 "완료 됨"으로 전환되는 제출 버튼 이 목표를 달성하는 데는 여러 가지 방법이 있지만, 진부한 코드를 쓰지 않고도이를 수행하기 위해 Ember 관점에서 "모범 사례"가 무엇인지 궁금합니다. 이건 정말 못생긴

UiControls.SubmitButton = Ember.View.extend({ 

    template: function() { 
    var template = '{{#if view.isNotStarted}}Submit{{/if}}'; 
    template += '{{#if view.isStarted}} <i class="icon-spinner icon-spin"></i>Saving...{{/if}}'; 
    template += '{{#if view.isFinished}} <i class="icon-check-sign"></i>Finished!{{/if}}' 
    return Ember.Handlebars.compile(template); 
    }.property(), 

    isNotStarted: true, 
    isStarted: null, 
    isFinished: null, 

    classNames: ['btn', 'btn-green'], 

    isDisabled: false, 

    click: function(){ 
    if (!this.get('disabled')){ 
     this.set('isNotStarted', false); 
     this.set('isStarted', true); 
     this.set('isFinished', false); 
     this.timer(); 
    } 
    }, 

    /* Simulates a server call */ 
    timer: function(){ 
    (function(self){ 
     setTimeout(function(){ 
     self.set('isStarted', false); 
     self.set('isFinished', true); 
     }, 500); 
    })(this); 
    } 
}); 

나에게 - 우리는 핸들 '의도적으로 제한 조건 구문을 작동하기 위해 이벤트를 기반으로 개별 부울 값을 설정하는 :

현재 나는 다음과 같은 코드가 있습니다.

내가 무엇 을 원한다면은 Ember StateManager 속성 (Handlebars 구문으로는 불가능)과 같은 것을 받아들이는 핸들 바 구조입니다. 또는 최소한 StateManager에서 계산 된 속성을 기반으로 템플릿을 변경하고 싶습니다 (다시는 불가능). 그래서 제 질문은 위의 코드를 작성하여 상태 복제를 많은 불리언 플래그 조작을 통해 수동으로 처리하는 코드 중복을 방지하는 더 좋은 방법이 있습니까?

Answer 1

내게 이것은 정말로 추한 것입니다. 우리는 핸들 바의 의도적으로 제한된 조건 구문을 사용하기 위해 이벤트를 기반으로 개별 불리언 값을 설정합니다.

완전히 동의했기 때문에 약간의 리팩터링이 필요하다는 신호입니다.

내가 원하는 것은 Ember StateManager 속성 (Handlebars 구문으로는 불가능)과 같은 것을 받아들이는 핸들 바 구조입니다.

사용자 정의 핸들바 도우미를 작성하는 것이 가능하지만 솔직히 그 방법을 권장하지 않습니다.

은 또는, 적어도, 내 템플릿 (수없는, 다시)를에서 StateManager에서 계산 된 재산의 기반으로

왜를 변경하려면? 당신이 그 속성을 가지고 있다고해도 모든 불리언이 없으면 템플릿을 변경할 수 없다는 것을 의미합니다.

제 질문은 위의 코드를 작성하여 상태 복제를 많은 불리언 플래그 조작을 통해 수동으로 처리하는 코드 중복을 방지하는 더 좋은 방법이 있습니까?

예. 핸들 바가이 제한을 갖는 이유는 복잡성과 로직이 템플릿의 일부가되는 것을 방지하기 위해서입니다. 예를 들어 언제든지 어떤 값을 기준으로 1 of 3 버전을 표시해야 할 때가 있습니다. 그런 종류의 로직은 뷰 또는 컨트롤러 레이어에 속합니다. 중 "제출"해야 하는가 "... 저장"또는 "완료 :

그래서 예를보고,

• 텍스트을 변경해야하는 템플릿의 두 가지 측면이있다!"
• iconClassNames : 빈, 어느"아이콘 - 스피너 아이콘 스핀 "또는"아이콘-서명 확인 우리가 할 템플릿을 단순화 할 수 염두에두고 "이와

:

<i {{bindAttr class="view.iconClassNames"></i>{{view.text}} 

을

그리고보기

UiControls.SubmitButton = Ember.View.extend({ 
    template: Ember.Handlebars.compile('<i {{bindAttr class="view.iconClassNames"></i>{{view.text}}'), 
    classNames: ['btn', 'btn-green'], 
    isDisabled: false, 
    text: "Submitted", 
    iconClassNames: "", 
    click: function(){ 
    if (!this.get('disabled')){ 
     this.set('text', 'Saving...'); 
     this.set('iconClassNames', 'icon-spinner icon-spin'); 
     this.timer(); 
    } 
    }, 

    /* Simulates a server call */ 
    timer: function(){ 
    (function(self){ 
     setTimeout(function(){ 
     this.set('text', 'Finished!'); 
     this.set('iconClassNames', 'icon-check-sign'); 
     }, 500); 
    })(this); 
    } 
}); 

이 시뮬레이션을 위해 작동하지만 적합하지 않습니다에 속성을 추가합니다. 정말 당신이 텍스트와 iconCla을 원하는 ssNames는 stateManager에 bound이됩니다. 즉 text 및 iconClassNames을 계산 속성으로 변경해야합니다. 이상적으로는 모델 객체의 기본 상태를 기반으로 계산되며, 컨트롤러에는 click()이 정의되지만 시뮬레이션의 경우이 값은 다음과 같습니다.

UiControls.SubmitButton = Ember.View.extend({ 
    template: Ember.Handlebars.compile('<i {{bindAttr class="view.iconClassNames"></i>{{view.text}}'), 
    classNames: ['btn', 'btn-green'], 
    isDisabled: false, 
    state: 'new', 
    text: function() { 
    //return appropriate button text based on state 
    }.property('state'), 
    iconClassNames: function() { 
    //calculate text based on state 
    }.property('state'), 

    /* Simulates a server call */ 
    click: function(){ 
    if (!this.get('disabled')){ 
     this.set('state', 'saving'); 
     this.timer(); 
    } 
    }, 

    /* Simulates a server call */ 
    timer: function(){ 
    (function(self){ 
     setTimeout(function(){ 
     self.set('state', 'finished'); 
     }, 500); 
    })(this); 
    } 
});