Javascript 在“同时”属性更改时渲染一次

在我的Backbone.js应用程序中，我有以下模型和视图：

var Operation = Backbone.Model.extend({

    defaults: function() {
        return {
            sign: '-',
            value: '0000',
            index: 0
        }
    }
});
var operation = new Operation();

var OperationView = Backbone.View.extend({

    el: '#operation',

    initialize: function() {
        this.listenTo(this.model, 'change:sign change:value', this.renderOperation);
        this.renderOperation();
    },

    renderOperation: function() {
        console.log('rendered once');
        this.$el.html(this.model.get('sign') + this.model.get('value'));
    }
});
var operationView = new OperationView({ model: operation });

观景台监视的地方

'change:sign change:value'

…在符号或值更改时更新视图

当我使用

// Test
setInterval(function() {
    var newValue = parseInt(operation.get('value'), 10);
    newValue += 500;
    newValue += '';
    operation.set({ 'sign': '+', 'value': newValue });
}, 1000);

…第一次执行setInterval时，视图将更新两次，渲染一次为console.logged 2次

然而，由于我同时设置了符号和值，我宁愿我的视图只更新一次

---

问题：在Backbone.js中，是否有任何方法可以在模型的多个特定属性中侦听更改，并且如果同时设置了所述多个属性，则仅渲染视图一次？

您的视图正在侦听两个“更改：符号更改：值”

因此，当该属性发生更改时，每个属性更改都会触发一次事件

您始终可以侦听模型上的更改事件。如果在同一个散列集中更改了模型属性，则只会触发单个更改

this.listenTo(this.model, 'change', this.renderOperation);

但是如果您仍然希望侦听属性上的多个更改事件，并且这些更改事件只触发一次。在设置值并触发属性更改事件时，您可能会使用hack来传递{silent:true}。有点黑

var Operation = Backbone.Model.extend({

    defaults: function () {
        return {
            sign: '-',
            value: '0000',
            index: 0
        }
    }
});
var operation = new Operation();

var OperationView = Backbone.View.extend({

    el: '#operation',

    initialize: function () {
        this.listenTo(this.model, 'change:sign change:value', this.renderOperation);
        this.renderOperation();
    },

    renderOperation: function () {
        console.log('rendered once');
        this.$el.html(this.model.get('sign') + this.model.get('value'));
    }
});
var operationView = new OperationView({
    model: operation
});

setInterval(function() {
    var newValue = parseInt(operation.get('value'), 10);
    newValue += 500;
    newValue += '';
    operation.set({ 'sign': '+', 'value': newValue }, {silent: true});
    operation.trigger('change:sign')
}, 1000);

---

您的视图正在侦听两个“更改：符号更改：值”

因此，当该属性发生更改时，每个属性更改都会触发一次事件

您始终可以侦听模型上的更改事件。如果在同一个散列集中更改了模型属性，则只会触发单个更改

this.listenTo(this.model, 'change', this.renderOperation);

但是如果您仍然希望侦听属性上的多个更改事件，并且这些更改事件只触发一次。在设置值并触发属性更改事件时，您可能会使用hack来传递{silent:true}。有点黑

var Operation = Backbone.Model.extend({

    defaults: function () {
        return {
            sign: '-',
            value: '0000',
            index: 0
        }
    }
});
var operation = new Operation();

var OperationView = Backbone.View.extend({

    el: '#operation',

    initialize: function () {
        this.listenTo(this.model, 'change:sign change:value', this.renderOperation);
        this.renderOperation();
    },

    renderOperation: function () {
        console.log('rendered once');
        this.$el.html(this.model.get('sign') + this.model.get('value'));
    }
});
var operationView = new OperationView({
    model: operation
});

setInterval(function() {
    var newValue = parseInt(operation.get('value'), 10);
    newValue += 500;
    newValue += '';
    operation.set({ 'sign': '+', 'value': newValue }, {silent: true});
    operation.trigger('change:sign')
}, 1000);

---

谢谢你的帮助，但不幸的是，这并不能回答我的问题。我想听听模型的多个特定属性的变化。在您的示例中，我的视图将在任何属性更改时更新，但我不希望在我的索引属性更改时更新我的视图。无论何时在模型上设置索引，您都可以传递silent:true属性。。所以它不会触发更改事件。否则，您可以使用我提供的选项2，该选项在设置属性后触发事件，但收听“change:sign change:value”，更改特定属性上的事件。编辑得好，这正好回答了我的问题。解决方案并不漂亮，但考虑到我设置的相当挑剔的场景，这是可以预料的。非常感谢@杰克逊。。很高兴能提供帮助：谢谢你的帮助，但不幸的是，这并不能回答我的问题。我想听听模型的多个特定属性的变化。在您的示例中，我的视图将在任何属性更改时更新，但我不希望在我的索引属性更改时更新我的视图。无论何时在模型上设置索引，您都可以传递silent:true属性。。所以它不会触发更改事件。否则，您可以使用我提供的选项2，该选项在设置属性后触发事件，但收听“change:sign change:value”，更改特定属性上的事件。编辑得好，这正好回答了我的问题。解决方案并不漂亮，但考虑到我设置的相当挑剔的场景，这是可以预料的。非常感谢@杰克逊。。很高兴能够帮助：