backbone.js 为什么重置窗体不会清除绑定模型属性

z9ju0rcb  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(147)

我已经使用backbone-stickit bindings将表单中的文本输入绑定到了一个 Backbone.js 模型:

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

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

af7jpaap

af7jpaap1#

输入元素的Stickit默认处理程序是(源代码):

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

相关问题