javascript - 为什么重置表单不会清除绑定(bind)的模型属性

Question

我已使用backbone-stickit 绑定(bind)将表单中的文本输入绑定(bind)到 Backbone 模型:

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

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

Answer 1

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());
    },
});