Aurelia 구성 요소가 부모에게 값을 반환하도록 할 수 있습니까?

Question

Aurelia를 사용하여 응용 프로그램을 만들고 있는데, 그 응용 프로그램의 일부에는 사용자를 나열하는 그리드와 특히 사용자의 활성 상태가 있습니다.

활성 상태를 편집 할 수있게하기 위해 슬라이드 단추 컨트롤 (iOS에서 보이는 것과 유사)을 만들었습니다. 여기에서 왼쪽으로 슬라이드하면 슬라이드이고 오른쪽으로 이동하면 false입니다.

사용자 격자를 사용하려면 사용자 정의 격자 버튼을 클릭하여 사용자를 활성화/비활성화 할 수 있지만이 컨트롤을 사용하여 값을 제공해야합니다. 이 행을 다시 변경하면에 배치됩니다

뭔가 같이 :.이

<table> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Is Active?</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr repeat.for="user of userList"> 
     <td>${user.id}</td> 
     <td>${user.name}</td> 
     <td>${user.email}</td> 
     <td><slidebutton active="${user.active}"></slidebutton></td> 
    </tr> 
    </tbody> 
</table> 

이 슬라이드 버튼이 설정됩니다 너무 많이에서 좋은 작품처럼

내 테이블에 보이는 상상 사용자의 활성 상태를 기반으로하는 기본값 예상했다.

그러나 슬라이드 단추가 변경되면 행을 알림으로 받아서 백 엔드를 업데이트하고 상태를 변경할 수 있습니다.

나는 사용자 정의 구성 요소 EG에 사용자 ID를 전달에 대해 아니에요 :

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td> 

을하지만 난 오히려 컨트롤이 전화를 걸거나를 사용에서 저를 방지 아무것도하지 않을 것 토글 가능한 정보의 다른 항목을 가질 수있는 다른 그리드와 같은 다른 장소에서.

이벤트를 기반으로하는 방법을 생각해 본 다음 사용자 테이블 중 하나를보고 500 행이 넘는 테이블에 대한 잠재력과 500 슬라이드에서 500 개의 이벤트 추적 및 관리 가능성을 확인했습니다. 버튼은 실제로 내가하고 싶었던 것처럼 보이지 않았습니다.

값을 애트리뷰트에 반영하는 방법이 있다면 위대한 출발점이 될 것이라고 생각하지만 가능하다면 기본 컨트롤을 직접 변경하는 것이 좋습니다. 가능하다면 행에 대한 모델.

Answer 1

양방향 데이터 바인딩을 쉽게 설정할 수 있습니다. 먼저 문자열 보간법을 사용하여 값을 전달하는 대신 .bind 구문을 사용하여 전환해야합니다. 문자열 보간을 사용하면 값을 문자열로 변환하지만 .bind 구문은 전달하는 모든 유형을 유지할 수 있기 때문입니다. 그것은 또한 객체와 그 안에 바인딩을 위해 작동합니다.

<td><slidebutton active.bind="user.active" uid.bind="user.id"></slidebutton></td> 

우리는 위의 예제 코드에서 .two-way에 .bind을 변경할 수 있으며, 이러한 바인딩은 양방향이 될 필요가이 아우렐 리아 말할 것이다. 그게 당신이 원하는 것을 달성 할 것이다, 그러나 항상이해야하는 성가신 것 : 나는 uid 속성 ISN 같은데요로, 양방향 데이터 바인딩으로 나는 단지 active 속성을 설정하는

<td><slidebutton active.two-way="user.active" uid.bind="user.id"></slidebutton></td> 

주 slidebutton 컨트롤 내부에서 변경되었으므로 두 가지 방법으로 데이터 바인딩을 수행 할 필요가 없습니다.

하지만 기본적으로 양방향 데이터 바인딩으로 설정할 수 있습니다. 이것을하는 방법을 보자.slidebutton 사용자 지정 요소에 active 및 uid의 바인딩 가능한 속성을 이미 만들었습니다. 나는 그들이 (ESNext에서) 같이 걸거야 :

@bindable active; 
@bindable uid; 

우리가 이들에 구성의 비트를 추가 할 경우, 우리는 양방향 데이터 바인딩을 기본값으로 이러한 속성을 설정 한 다음, 당신이 얻을거야 기본적으로 찾는 양방향 데이터 바인딩.

@bindable({ defaultBindingMode: bindingMode.twoWay }) active; 
@bindable uid; 

위의 숫자는 bindingMode.twoWay입니다. 이 열거 형을 aurelia-framework 모듈에서 가져와야합니다. 이 작업을 완료하면

import {bindable, bindingMode} from 'aurelia-framework'; 

, 당신은 active.bind="user.active"를 사용 아우렐 리아는 2 차원을 처리합니다으로 돌아갈 수 : 따라서, 당신은 slidebutton의 뷰 모델 파일의 맨 위에 다음 줄 뭔가가있을 수 있습니다 way 데이터 바인딩.