为什么重置表单不会清除绑定的模型属性

Posted 2021-05-05

我已经使用backbone-stickit bindings将表单中的文本输入绑定到Backbone模型：

bindings: {
    '#txtRemarks': 'remarks',
    '#txtFromAccountNumber': 'account_no',
    '#fileChooser':'fileChooser'
}

当我重置表单时，文本输入中的值将被清除，但值仍然存在于模型属性中。

答案

输入元素的Stickit默认处理程序是（source）：

{
    selector: 'input',
    events: ['propertychange', 'input', 'change'],
    update: function($el, val) { $el.val(val); },
    getVal: function($el) {
        return $el.val();
    }
}

它监听'propertychange', 'input', 'change'并且表单重置不会触发这些事件。

您需要手动收听表单的reset事件并手动更新模型。

var FormView = Backbone.View.extend({
    bindings: { /* ... */ },
    events: {
        '#form-id reset': 'onReset',
    },
    ui: {
        remarks: '.remarks-input',
        account: '.account-input'
    },

    onReset: function(e) {
        this.model.set({
            remarks: this.getUI('remarks').val(),
            account: this.getUI('account').val(),
        });
    }
});

或者在处理表单时的另一个技巧是在进行任何更改之前将模型的副本保持在其初始状态。然后，您可以使用该副本重置属性或检查是否有更改。

var FormView = Backbone.View.extend({
    bindings: { /* ... */ },
    events: {
        '#form-id reset': 'onReset',
    },
    initialize: function() {
        this.master = this.model.clone();
    },

    onReset: function(e) {
        this.model.set(this.master.attributes);
    },
    getChanges: function() {
        return this.master.changedAttributes(this.model.attributes);
    },
    isDirty: function() {
        return Boolean(this.getChanges());
    },
});