Question

I would like to say “when question_number changes, run updateQuestionNumber. If anything EXCEPT question_number (and whatever else I give a custom render function), run .render()”.

The problem with the following code is that both updateQuestionNumber AND render run.

v.QuestionBuilder = Backbone.View.extend({
    initialize: function() {
        this.model.on('change:question_number', this.updateQuestionNumber, this);
        this.model.on('change', this.render, this);
    },
    //only this function should run when question_number is changed
    updateQuestionNumber: function(){
        this.$('.question-number').text(this.model.get('question_number'));
    },
    //this should run when anything except question_number is changed
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.fadeIn('slow');

        /* blah blah blah */
        return this;
    }
});

Answer 1

Here is the best solution I could think of:

When this.render() fires I set an array non_render of properties which don’t require a full render (are taken care of by this.model.on('change:whatever', this.whateverRenderFunction, this);). Then it checks the changedAttributes. If there is anything in there that’s NOT in non_render (._difference) then it continues. Otherwise it returns.

This seems like a super-bulky solution though (and I have to maintain the non_render list both in initialize and in render. Any improvements would be awesome…

    render: function(model, value, options){
        if(model){ //this was triggered via .change()
            var changed = _.keys(model.changedAttributes());
            var non_render = ['question_number'];

            //if there is anything in changed that's not part of non_render
            if(_.difference(changed, non_render).length === 0){
                return false;
            }
        }

        var data = this.model.toJSON();
        _.extend(data, _.result(this.templateProperties));

        this.$el.html(this.template(data));
    }