사용자 정의 Handlebars 도우미 내에서 linkTo 사용

Question

Handlebars 도우미를 사용하여 객체 세트를 구문 분석하고 반환 된 결과를 #linkTo 호출로 감싸서 Embers 라우터가 가져 오도록합니다. 여기

내가보기에서 전화 드렸습니다 방법은 다음과 같습니다

Ember.Handlebars.registerHelper 'buildBreadcrumb', (val, opts) -> 
    value = Ember.get(this, val) 
    out = "" 
    value.forEach (group, index) => 
    if value.length - index == 2 
     out += '{{#linkTo group ' + group.name + '}}' 
    if value.length - index == 1 
     out += '{{#linkTo group ' + group.name + '}}' 
    out 

위의 단지 분명한 이유 리터럴 문자열로 {{#linkTo ...}}을 구문 분석 : {{buildBreadcrumb my_objects}}

여기처럼 내 도우미 모습입니다. 내가 그것을 찾고있는 방식으로 구문 분석 할 수있는 방법이 있습니까? 저는 뷰 자체에서 {{#each}} 등등을 사용할 수 있다는 사실을 잘 알고 있습니다.하지만 사용 사례 때문에 헬퍼를 사용해야합니다. 어떤 제안?

Answer 1

사용자 정의 Handlebars보기 도우미를 작성할 수 있습니다. 이 뷰는 #each 로직을 요약 할 수 있지만 최종 도우미는 여기에있는 것과 거의 유사합니다. 유일한 차이점은보기 도우미에 속성으로 인수를 전달해야한다는 것입니다.

이 도우미를 만드는 방법은 도우미 함수 대신 View 클래스를 전달하는 것입니다. 이 방법의 이점은 바인딩이 자동으로 연결되어있다

<script type='text/x-handlebars' data-template-name='breadcrumb'> 
    <ul class="breadcrumb"> 
    <li>{{#linkTo 'group' view.penultimate}}{{view.penultimate.id}}{{/linkTo}} &raquo;</li> 
    <li>{{#linkTo 'group' view.last}}{{view.last.id}}{{/linkTo}}</li> 
    </ul>  
</script> 

App.BreadcrumbView = Ember.View.extend({ 
    templateName: 'breadcrumb', 
    penultimate: function() { 
    var length = this.get('items').length; 
    return this.get('items')[length - 2]; 
    }.property('items'), 
    last: function() { 
    var length = this.get('items').length; 
    return this.get('items')[length - 1]; 
    }.property('items') 
}); 

Ember.Handlebars.helper('breadcrumb', App.BreadcrumbView); 

그리고 해당 템플릿

,

<script type='text/x-handlebars' data-template-name='breadcrumb'> 
    <ul class="breadcrumb"> 
    {{#each item in view.items}} 
     <li>{{#linkTo 'group' item}}{{item.id}}{{/linkTo}} &raquo; 
     </li> 
    {{/each}} 
    </ul>  
</script> 

앱에서 도우미를 사용하는, 그래서 변화 아이템 데이터는 빵 부스러기 뷰를 자동으로 업데이트하여 내부 Metamorphing을 유지합니다.

여기에 jsbin 예가 있습니다.