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

Question

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

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