儘管有雙向綁定，取消/關閉ractive輸入

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。然後點擊保存，調用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，並有twoway禁用它，同時保持其他部分做兩方式綁定。畢竟，這就是組件的工作原理。

或者，您可以將數據映射到與映射到UI的鍵路徑不同的鍵路徑。在保存/取消時，將其複製到另一個。該方法與Angular中的angular.copy類似，在通過驗證時將表單數據複製到實際範圍數據中。