尽管有双向绑定，取消/关闭ractive输入

我正尝试在ractive中使用几个input字段进行数据操作。在一个简化版本，它基本上是：尽管有双向绑定，取消/关闭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}}';

编辑&节约的伟大工程，但取消按钮 - 这是指解雇任何用户输入如预期无法表现。当我点击取消时，绑定已经改变了我的data。所以它不会被存储到数据库中，但我无法恢复到原始值，因此在重新加载之前，它在UI中显示为错误。

我也尝试了lazy: true选项，但是这并没有任何区别（我想是因为打了取消按钮触发一个事件change）...

来源

2017-02-23 Torf

mousedown而不是点击？ – epascarello

有趣的想法，但有同样的结果。 – Torf

所以不要使用双向绑定 – epascarello

我也尝试了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类似，在通过验证时将表单数据复制到实际范围数据中。

来源

2017-02-23 23:32:00 Joseph

避免取消不是一种选择。实际上，每一行都有一个编辑按钮，它将相应行的所有输入字段设置为'disabled = false'，并显示最初隐藏的保存和取消按钮。在取消取消时，我希望已经对输入字段进行的任何更改都被取消，并且该行恢复到原始状态。所以，也许我应该尝试第二个关键路径来存储原始值并将其复制回取消... – Torf

我发现不是很优雅，但非常实用的解决方法：如果我附加'ractive.unrender（）; ractive.render（'＃myID'）;'到取消按钮，表格从未改变的数据中重新绘制，并且任何用户输入被恢复。 – Torf

@Torf是的。当我编辑并添加复制选项时，我隐瞒了该选项。：d – Joseph

尽管有双向绑定，取消/关闭ractive输入

回答

相关问题