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

Question

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

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

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

Answer 1

输入元素的粘贴板默认处理程序为(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());
    },
});