Ember.js + Handlebars 사용자 정의 도우미

Question

컨트롤러의 속성에 따라 변경되는 간단한 조건문을 Handlebars에서 구현하려고합니다.

나는 그럭저럭 나왔다.

Handlebars.registerHelper("businessVerificationState", function(state, block) { 
    var value = Ember.getPath(this, "state"); 
    if (value == state) { 
    return block(this); 
    } 
}); 

App.businessController.business는 내가 만든 모델 개체를 나타내며 "상태"는 특성입니다. 아래는 템플릿입니다.

<script type="text/x-handlebars"> 
    {{#with App.businessController.business}} 
    {{#exampleState "test1"}} 
     <p>Test 1</p> 
    {{/exampleState}} 

    {{#exampleState "test2"}} 
     <p>Test 2</p> 
    {{/exampleState}} 
</script> 

이 모든 작품이 부풀어 오른다. 내 모델 속성이 변경된 경우는 예외입니다. 웹킷의 콘솔에서 .. 입력 할 경우

business.set ("state", "test2"); 예를 들면 - 아무것도 바뀌지 않습니다.

IF 또는 UNLESS와 같은 다른 표준 핸들 바 명령문을 사용하면 모델 속성을 업데이트 할 때 내용이 변경됩니다.

나는 분명히 잘못된 것을하고 있으며 도움을 주시면 감사하겠습니다.

Answer 1

가장 쉬운 방법은 컨트롤러 이름에 연결된 속성이있는 부모보기와 상태 이름이 속성으로 지정된 자식보기를 만드는 것입니다. 그런 다음 부모보기에 바인딩 된 현재 값과 일치하는지 여부에 따라 자식보기의 표시 여부를 자동으로 전환하는 isVisible 계산 속성을 정의 할 수 있습니다.

<script type="text/x-handlebars"> 
    {{#view Ember.View currentStateBinding="App.businessController.business.state"}} 
    {{#view App.StateView stateName="test1"}} 
     <p>Test 1</p> 
    {{/view}} 

    {{#view App.StateView stateName="test2"}} 
     <p>Test 2</p> 
    {{/view}} 
    {{/view}} 
</script> 

그리고 당신의 JS 코드 :

var App = Ember.Application.create(); 

App.businessController = Ember.Object.create({ 
    business: Ember.Object.create({ 
     state: 'test1' 
    }) 
}); 

App.StateView = Ember.View.extend({ 
    isVisible: function() { 
     return this.get('stateName') === this.getPath('parentView.currentState'); 
    }.property('parentView.currentState') 
}); 

여기에 작업 jsFiddle 예입니다 : http://jsfiddle.net/ebryn/QAxPU/