Question

suppose I have a model and a view ,ths view have two method:one is bind the document mousemove event and the other is unbind method,defalut I give the document mousemove event, once the model’s enable value changed I will call the view’s unbind method:

    window.ConfigModel = Backbone.Model.extend({
        defaults: {
            'enable':0
        },
        initialize: function(){
            this.bind("change:enable", function () {
                var portView2 = new PortView();
                portView2.viewOff();                        
            });
        },
        change:function () {
            this.set('enable', 9);
        }
     })

    window.PortView = Backbone.View.extend({
        viewOn: function () {
            $(document).on('mousemove', function () {
                console.log('move')
            })
        },
        viewOff: function () {
            $(document).off('mousemove');
        }
    })

then I put an input on the document to call the model changed:

    $('input').click(function () {
        var configModel = new ConfigModel();
        configModel.change();
    })

the boot script is :

var portView1 = new PortView();
portView1.viewOn();

The problem is once I call the click the input button ,the chrome would tell me an error:Maximum call stack size exceeded it seems the change be invoke many times.So what’s the problem with my problem ,how can I solve this problem

Answer 1

Backbone models already have a change method:

change model.change()

Manually trigger the "change" event and a "change:attribute" event for each attribute that has changed. If you’ve been passing {silent: true} to the set function in order to aggregate rapid changes to a model, you’ll want to call model.change() when you’re all finished.

Presumably something inside Backbone is trying to call configModel.change() and getting your version of change which triggers another change() call inside Backbone which runs your change which … until the stack blows up.

You should use a different name for your change method.

---

That said, your code structure is somewhat bizarre. A model listening to events on itself is well and good but a model creating a view is odd:

initialize: function() {
    this.bind("change:enable", function () {
        var portView2 = new PortView();
        portView2.viewOff();                        
    });
}

And instantiating a view simply to call a single method and then throw it away is strange as is creating a new model just to trigger an event.

I think you probably want to have a single ConfigModel instance as part of your application state, say app.config. Then your click handler would talk to that model:

$('input').click(function () {
    app.config.enable_level_9(); // or whatever your 'change' gets renamed to
});

Then you’d have some other part of your application (not necessarily a view) that listens for changes to app.config and acts appropriately:

app.viewOn = function() {
    $(document).on('mousemove', function() {
        console.log('move')
    });
};
app.viewOff = function() {
    $(document).off('mousemove');
};
app.init = function() {
    app.config = new ConfigModel();
    app.viewOn();
    $('input').click(function () {
        app.config.enable_level_9();
    });
    // ...
};

And then start the application with a single app.init() call:

$(function() {
    app.init();
});