ember.js가 {{bindAttr}} <label> 컬렉션의 올바른 inputField.elementId를 지정하지 않았습니다.

Question

{{bindAttr}} 및 입력 필드의 [ viewName] .elementId입니다. 단일 항목보기에서 작동하지만 여러 레코드가 표시되는 경우에는 작동하지 않습니다. 레이블을 콜렉션의 마지막 입력 필드에 링크하기 만하면됩니다. (이것은 이전 엠버 라이브러리를 사용하여 이전 반복에서 작동하는 데 사용하지만, 지금은 나던.) 내가 생성 한 fiddle하지만 그것의 요점은 다음과 같습니다

나는 어쩌면 내가 collectionView를 생성하고 생성 할 수 있다고 생각

{{#each controller}} 
    <fieldset>    
     <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label> 
     {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}        
    </fieldset> 
{{/each}} 

컬렉션의 각 항목에 대해 고유 한 ID를 생성하는 viewName에 대한 계산 된 속성입니다. 다른 문제에 대한 답변에서 언급 한 종류 here. 그러나 그것은 너무 복잡합니다. 사용자가 해당 레이블을 클릭하면 입력 필드를 강조 할 수 있습니다.

도움을 주시면 감사하겠습니다.

Answer 1

레이블 및 입력 필드 주위에 래퍼 Ember.View를 만듭니다. 의이 App.FieldView을 부르 자 : 템플릿에서 다음

App.FieldView = Ember.View.extend({ 
    tagName: 'fieldset' 
}); 

을 : http://jsfiddle.net/NQKvy/26/

Answer 2

양식이 다소 까다 롭습니다. 올바르게 작업하기를 원한다면 인정해야합니다. 그러나 구조에 오는 에머 추가 기능이 있습니다 (예 : easyForm).

은 수도보고 당신이 등 양식 필드

는 희망이 도움이 고유 라벨을 가진에 정확한 것과 같은 당신이 직면하고있는 문제를 해결하는 데 도움이 되세요.

Answer 3

파나지오티스 Panagi, 정확하게 질문에 대답했다 : 바이올린은

{{#each controller}} 
    {{#view App.FieldView}}    
    <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label> 
    {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}        
    {{/view}} 
{{/each}} 

. 나는 이것이 왜 일어나고 있는지, 즉 : - 잘못된보기로 연결하는 이유를 추가 할 것입니다.

템플릿 내부의 view 속성은 엠버보기 HTML 마크 업을 포장을 말한다. 그러나이 속성은 컨텍스트에 따라 다른 값을 갖습니다.

이 값은 배치 된보기 블록에 따라 달라집니다. 기본적으로이 템플릿의 템플릿 자체는보기의 경우 ListOfPeopleTemplateView에 해당합니다. 당신이 view.tbFullName.elementId에 바인딩 할 때

그래서, 당신은 실제로 {instance of ListOfPeopleTemplateView}.tbFullName.elementId에 결합된다. 그리고 루프가 완료되면 tbFullName 만 보이는 것이 마지막 것입니다.

파나지오티스 Panagi의 용액을 다른 뷰 내부 라벨, 그래서 블록 내의 행 view 변경 값을 감싸도록하고, 따라서 동일한 결과이다 달성 마침내 올바른 tbFullName

더 쉬운 방법을 가리키는 레이블 안에 텍스트 필드를 래핑하십시오. 그렇다면 label for 바인딩이 전혀 필요하지 않습니다.

<label>Full Name 
    {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}  
</label> 

는 easyForm의 존재를 알고 흥미로운이 jsfiddle