Ember Views를 실행하는 모범 사례?

Question

필자는 Ember.js의 새로운 기능이며 코드 정리에 대한 질문이 있습니다. Ember (v1.0.0-rc.1), Handlebars ("1.0.0-rc.3") 및 Bootstrap (v2.3.1)을 사용하고 있습니다.

은 아래에있는 내 템플릿 중 하나를 수행합니다

<form class="form-horizontal"> 

    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Name</label> 
    <div class="controls"> 
     {{view Ember.TextField valueBinding="name" id="inputEmail"}} 
    </div> 
    </div> 

    <div class="control-group"> 
    <label class="control-label" for="inputNumber">ID Number</label> 
    <div class="controls"> 
     {{view Ember.TextField valueBinding="number" id="inputNumber"}} 
    </div> 
    </div> 

    <div class="control-group"> 
    <label class="control-label" for="inputContactName">Contact Name</label> 
    <div class="controls"> 
     {{view Ember.TextField valueBinding="invoiceContactName" id="inputContactName"}} 
    </div> 
    </div> 

    <div class="control-group"> 
    <label class="control-label" for="inputContactEmail">Contact Email</label> 
    <div class="controls"> 
     {{view Ember.TextField valueBinding="invoiceContactEmail" id="inputContactEmail"}} 
    </div> 
    </div> 
</form> 

지금이 풍부한 뷰 프레임 워크를 가지고, 모든 반복이 너무 더러운 느낌! 문제는 템플릿의 본질입니다 ... 나는 바인딩도하고 템플릿에 렌더링 할 값을 변경하는 객체를 전달해야합니다. 첫 번째 시도는 Handlebars 템플릿을 "중첩 (nest)"하는 것이 었는데 ... 난장판이었고 어디에도 없었습니다. 내 두 번째 시도는 "Pre-processor"를 만들어 Handlebars가 컴파일하기 전에 템플릿 문자열을 수정하는 것이 었습니다.이 방법은 더 깨끗하게 보였지만 전혀 작동하지 않습니다 ... "템플릿"이 뷰에서 호출되면 나타납니다. 문맥을 벗어나는 길이다. 아래 예 :

App.BootstrapTextField = Ember.View.extend({ 
    displayLabel: null, 
    valueToBind: null, 
    classNames: ['control-group'], 

    templateString: '<div class="control-group">' + 
        '<label class="control-label" for="input##valueToBind##">##displayLabel##</label>' + 
        '<div class="controls">' + 
         '{{view Ember.TextField valueBinding="##valueToBind##" id="input##valueToBind##"}}' + 
        '</div>' + 
        '</div>', 

    preprocessTemplate: function() { 
    var template = this.templateString.replace(/##valueToBind##/g, this.get('valueToBind')); 
    return template.replace(/##displayLabel##/, this.get('displayLabel')); 
    }, 

    template: Ember.Handlebars.compile(this.preprocessTemplate()) 
}) 

오류 :

Uncaught TypeError: Object [object global] has no method 'preprocessTemplate' 

내 질문은 :이 청소에 대해 이동하는 가장 좋은 방법은 무엇입니까?

Answer 1

다른 게시물의 답변을 찾았습니다. 문제는 템플리트를 처리하여 레이블의 "for"속성이 입력 요소의 id 요소와 일치하도록하는 것입니다. 여기 게시물은 다음과 같습니다

Using Ember.js text field ids for a <label> tag

그리고 내 솔루션 :

{{view App.BootstrapTextField valueBinding='somefield' displayLabel='FieldName'}} 

Answer 2

내 머리 꼭대기에서, Ember Mixin을 레이아웃 속성과 함께 사용하면 원하는 것을 얻을 수 있다고 생각합니다.

App.BootstrapTextField = Em.TextField.extend(App.BootstrapMixin, { 
    // your custom logic 
}) 

과 같은 템플릿에 포함 :

App.BootstrapMixin = Em.Mixin.extend({ 
    layout: Em.Handlebars.compile(
       '<div class="control-group">' + 
       '<label class="control-label" for="input##valueToBind##">##displayLabel##</label>' + 
       '<div class="controls">' + 
        '{{yield}}' + 
       '</div>' + 
       '</div>') 

}) 

당신은과 같이 사용자 정의 부트 스트랩보기를 정의 할 수 있습니다 내가 정확히 확인하기 위해 확인되지 않은

<form class="form-horizontal"> 
    {{view App.BootstrapTextField valueBinding="name" id="inputEmail"}} 
    .. 
    .. 
</form> 

이 모든 작품 (어리석은 오류 또는 뭔가를 만들었을 수도 있습니다)하지만, 나는 일반적인 생각이 당신을 바닥에서 벗어나기에 충분해야한다고 생각합니다. 희망이 도움이!