javascript - 尽管有两种方式绑定(bind)，但仍取消/消除事件中​​的输入

Question

我正在尝试使用几个输入字段在ractive中进行数据操作。在简化版本中，它基本上是:

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}}';

编辑和保存效果很好，但取消按钮 - 旨在消除任何用户输入无法按预期运行。当我点击取消时，绑定(bind)已经更改了我的数据。因此它不会存储到数据库中，但我无法恢复到原始值，因此在重新加载之前它在 UI 中显示错误。

我还尝试了lazy: true选项，但这没有任何区别(我认为因为点击取消按钮会触发change事件)...

Answer 1

I also tried the lazy: true option, but that did not make any difference

lazy不做你认为它做的事。默认情况下 (false)，它会在更改时更新模型。但如果true，它会在您取消输入焦点时更新模型。它仍在进行双向绑定(bind)。

你能做的就是设置twoway为假。然后点击“保存”，调用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 设置为所有内容，您可以简单地将 UI 的这一部分隔离到 component并禁用它的twoway，同时保持其余部分进行双向绑定(bind)。毕竟，这就是组件的工作原理。

或者，您可以将数据映射到与映射到 UI 的键路径不同的键路径。保存/取消时，您可以将它们复制到另一个。该方法类似于人们在 Angular 中执行 angular.copy 的方式，在通过验证时将表单数据复制到实际范围数据中。