Aurelia : 프로그래밍 방식으로 참조 값을 변경해도 모델이 변경되지 않습니다.

Question

여러 웹 페이지 (노트 편집기)에서 구성 요소를 활용하는 경우가 있습니다. 이 노트 편집기는 페이지의 입력 요소에서 값을 가져 와서 사용자가 수정할 수있는 구성 요소에 그 값을 저장합니다. 사용자는 노트 에디터에 타이프하고 Submit를 클릭한다. 그런 다음 노트 편집기 구성 요소는 새 값을 원본 페이지의 입력으로 다시 전달합니다.

"ref"를 사용하여 값을 앞뒤로 전달합니다. 메모 편집기 구성 요소에서 ref의 값을 설정하면 모델이 업데이트되지 않는다는 점을 제외하고는 모두 잘 작동합니다. 우리는 모델을 업데이트하기 위해 한 번 타이핑 할 필요가 있음을 알았습니다. 예제를 설명하기위한 간단한 요령이 있습니다 :

이것은 ref 값을 프로그래밍 방식으로 설정하는 간단한 예입니다. "입력 값이"Hello "로 유지되지만 입력 필드가"값 변경됨 !!!! "으로 변경되는 방식에 유의하십시오. 버튼을 누르면 주의 할

https://gist.run/?id=fab025d6b99a93f9951b1a6e20efeb5e

몇 가지 : 1) 우리는 대신 "ID"또는 "이름"의 아우렐 리아의 "심판"을 사용하고 싶습니다. 2) "ref"대신 모델을 전달하려고했습니다. 모델의 값을 성공적으로 가져와 노트 편집기에 넣을 수 있지만 모델을 다시 전달할 때 모델이 업데이트되지 않습니다.

업데이트 :

답변 (감사합니다!). 여기에 우리가 모델을 전달하려고 시도한 코드가있다. 그래서 ref를 사용할 필요조차 없다. 이것은 우리를 위해 실패했습니다. 여기

는

import {NoteEditor} from './SmallDivs/note-editor'; 
... 
@inject(NoteEditor, ...) 
export class PageName { 
    constructor(NoteEditor, ...) 
    { 
    this.note = NoteEditor; 
    ... 
    } 


    OpenNoteDivAurelia(myTargetFld) 
    { 
    this.note.targetFld = myTargetFld; 
    this.note.vHidTextArea.value = myTargetFld; 
    this.note.show(); 
    } 
} 

이 부분이 성공적으로 우리의 구성 요소 (노트 편집기) 및 열립니다 page.js의보기 - 모델 page.html 여기

<TextArea value.bind="main.vAffectedClients" style="width:94%;" class="editfld" type="text" rows="6"></TextArea> 
<input class="butn xxsBtn" type="button" value="..." click.trigger="OpenNoteDivAurelia(main.vAffectedClients)" /> 

의보기이다 targetFld 값을 구성 요소의 TextArea에 배치합니다. 이 마지막 기능 "CloseNote"가 작동하지 않습니다 하나입니다

CloseNote(populateFld) 
    { 
     if (populateFld) 
     { 
     //This is the line that doesn't seem to work 
     this.targetFld = vHidTextArea.value; 
     } 
     this.isVisible = false; 
    } 

page.js/page.html에 값을 다시 배치 할 때 여기에

는 뷰 - 모델이다. 모델 (this.targetFld가 가리키는 것으로 믿는다)은 텍스트 영역의 값을 얻지 못한다. 오류가 아니며 단순히 아무 것도하지 않습니다.

Answer 1

입력 내용에 대해 value 속성을 프로그래밍 방식으로 설정하면 Aurelia가 입력 변경 알림을 받기 위해 첨부하는 이벤트가 발생하지 않습니다. 하지만이 이벤트 중 하나를 직접 해고하는 것은 간단합니다. 당신은 실제로 함수의 심판을 통과 할 필요가 없습니다

export class App { 
    mymodel = {"test":"Hello"}; 

    changeValByRef(myinput) 
    { 
    myinput.value = "Value Changed!!!!"; 
    myinput.dispatchEvent(new Event('change')); 
    } 

} 

은 언제 당신은 속성은 ref 속성에 사용하는 이름 승/당신의 VM에 추가되면, ref 속성을 사용합니다. 따라서 위의 예는 전달 된 객체 대신 this.myinput을 사용하여 수행 할 수 있습니다. 동일하므로 동일합니다. https://gist.run/?id=7f96df1217ac2104de1b8595c4ae0447

나는 당신이 주변에 모델을 통과에 문제가있는 경우 코드를보고 싶네 :

다음은 작업 예입니다.나는 아마 당신이 무엇이 잘못되었는지 알아낼 수 있도록 도와 줄 수 있습니다. 이렇게하면 ref을 사용할 필요가 없습니다.