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

Posted 2023-02-24

【中文标题】为啥重置表单不会清除绑定的模型属性

【英文标题】：Why resetting a form does not clear the bound model attributes为什么重置表单不会清除绑定的模型属性

【发布时间】：2017-12-20 12:05:09

【问题描述】：

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

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

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

【问题讨论】：

木偶默认没有bindings。您使用的是插件还是旧版本？

使用了backbone.stickit插件

【参考方案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());
    ,
);