양방향 바인딩에도 불구하고 락틱에서 입력 취소/취소

Question

ractive에서 데이터 조작을 위해 input 두 필드를 사용하려고합니다.

new Ractive({ 
    el: '#myID', 
    template: DataTpl, 
    magic: true, 
    modifyArrays: true, 
    data: {myJSON}, 
    save: function (id) { 
     //some code to save my Data to CouchDB 
    } 

const DataTpl = '{{#myJSON}}<input value="{{aValue}}">'+ 
'<button on-click="@this.save(_id)">Save</button>'+ 
'<button>Cancel</button>{{/myJSON}}'; 

편집 & 절약이 잘 작동하지만, 버튼 취소 - 예상대로 작동 할 수없는 사용자 입력을 해고하기위한 것입니다 : 단순화 된 버전에서는 기본적입니다. 취소를 클릭하면 바인딩이 이미 내 data으로 변경되었습니다. 따라서 데이터베이스에 저장되지는 ​​않지만 원래 값으로 되돌릴 수 없으므로 다시로드 할 때까지 UI에 잘못 표시됩니다.

나는 또한 lazy: true 옵션을 시도했지만 (취소 버튼을 치는 것은 change 이벤트를 발생하기 때문에 내 생각) 그 차이를하지 않았다 ...

Answer 1

가 나는 또한 lazy: true 옵션을 시도하지만했다 아무런 차이가 없다.

lazy 당신이 생각하는대로하지 않는다. 기본적으로 (false) 변경시 모델을 업데이트합니다. 그러나 true 인 경우 입력을 푸는 경우 모델을 업데이트합니다. 여전히 양방향 바인딩을하고 있습니다.

twoway에서 false까지 설정할 수 있습니다. 그런 다음 Save (저장)를 클릭하면 ractive.updateModel으로 전화하여 입력에서 모델로 데이터를 밀어 올립니다. 그러면 twoway 구성에 관계없이 모델이 업데이트됩니다. 취소의 경우 아무 것도 할 필요가 없습니다.

new Ractive({ 
 
    el: 'body', 
 
    twoway: false, 
 
    template: ` 
 
    {{ message }} 
 
    <input type="text" value="{{ message }}"> 
 
    <button type="button" on-click="@this.updateModel()">Save</button> 
 
    `, 
 
    data: { 
 
    message: '' 
 
    } 
 
});

<script src="https://unpkg.com/ractive/ractive.min.js"></script>

당신이 모든 것에 twoway: false을 설정하지 않으려면, 당신은 단순히 component에 UI의이 부분을 분리 할 수 ​​있으며 2 ~하고 나머지를 유지하면서 그것을 사용하지 twoway이 방법 바인딩. 결국 구성 요소가 작동하는 방식입니다.

또는 UI에 매핑 된 키 패스와 다른 키 패스에 데이터를 매핑 할 수 있습니다. 저장/취소 할 때 다른쪽에 복사합니다. 이 접근법은 사람들이 각도를 사용하여 수행하는 것과 비슷하며 유효성 검사를 통과 할 때 양식 데이터를 실제 범위 데이터로 복사합니다.