Question

我正在设置提交联系表单的模型，因此我抓取所有输入值，创建一个对象文字然后在模型上设置它。我有一个change事件监听器，然后输出一个摘要屏幕。我还有一个清除模型的重置按钮，并将模型重置为默认值。我的问题是，此重置还会触发更改事件，然后显示摘要屏幕，这是我不想要的。是否有可能阻止这种情况？

我的主干视图示例

initialize: function() {
        console.log('ContactForm::initialize');

        this.listenTo(this.model, 'invalid', this.onModelInvalid);
        this.listenTo(this.model, 'change', this.onModelSet);
    },
onFormSubmit: function(event) {

        event.preventDefault();

        var inputs = this.el.querySelectorAll('.js-input');

        this.setModelData(inputs);
    },

    setModelData: function(elements) {

        var attributes = {};

        for (var i = 0, len = elements.length; i < len; i++) {

            var thisInput = elements[i],
                thisInputValue = thisInput.value;

            attributes[thisInput.id] = thisInputValue;
        }

        this.model.set(attributes, { validate: true });
    },

    /*
     *  this.model returned, this model will contain an array of validation errors accessed via this.model.validationError
     *  loop through these and output each error field.
     */
    onModelInvalid: function() {
        console.log('ContactForm::onModelInvalid', this.model.validationError);

        this.toggleValidationClass('add');
    },

    onModelSet: function() {
        console.log('ContactForm::onModelSet', this.model.toJSON());

        Backbone.Events.trigger('show:summary', this.model);
    },

    onFormReset: function(event) {

        event.preventDefault();

        // Reset the model to default
        this.model.clear().set(this.model.defaults);

        // Reset form fields
        this.$('.js-form')[0].reset();

        // Remove all invalid classes if errors exist
        if(this.model.validationError && this.model.validationError.length > 0) {
            this.toggleValidationClass('remove');
        }

        console.log(this.model.toJSON());
    }

Answer 1

有一个名为silent

的.set未记录的选项

（出于某种原因，.clear的文档提到了它。）

github上的相关来源：https://github.com/jashkenas/backbone/blob/master/backbone.js#L482

所以试试

this.model.clear({silent:true}).set(this.model.defaults, {silent:true});

Demonstration on plnkr使用以下代码

var model = new Backbone.Model();

model.on('change', function(e) {
  document.write(JSON.stringify(e.changed));
});

model.set('foo', 'bar'); 
model.clear({silent: true}).set('foo', 'bar', {silent: true});
model.set('test', '123');

运行此操作会将{"foo":"bar"}{"test":"123"}写入文档，因此{silent:true}传递给.clear()和.set()的行未生成任何更改事件。

Answer 2

使用模型上的属性来判断它是新加载还是重置。将其设置为true中的onFormReset并在onModelSet中进行测试。

清除模型并重置为默认值时，防止模型集“更改”事件？

2 个答案: