绑定时调用骨干事件回调，但不触发

Question

I am trying to implement a simple mediator pattern for events, but my event callbacks are being called when I register them with the mediator.

The Mediator is simply:

define(function(require){
    'use strict';
    var _ = require('underscore');
    var Backbone = require('backbone');

    return _.extend( Backbone.Events);
});

I have created a simple View with no backing model or template

define(function (require) {

'use strict';

var Backbone = require('backbone');
var mediator = require('mediator');

var Sandbox = Backbone.View.extend({

    el: '.sandbox',
    initialize: function () {
        this.render();
        this.bindEvents();
    },

    bindEvents:function(){
        mediator.on("sandbox:change", this.changeText(), this );
    },

    render: function () {
        $(this.el).html("SANDBOX VIEW IS WORKING");
    },

    changeText: function () {
        $(this.el).html("THE TEXT HAS CHANGED");
    }
});

return Sandbox;

});

When the view is loaded, the sandbox:change event is fired off and the changeText function is called even though nothing has called mediator.trigger('sandbox:change')

Why is the callback invoked when it is simply being bound to the mediator object?

Answer 1

When the browser evaluates your sandbox change event binding mediator.on("sandbox:change", this.changeText(), this ); the changeText function is being executed because the () are included. What you really want to do is pass the changeText function object to the event binding:

    mediator.on("sandbox:change", this.changeText, this );

Remember that changeText, is an object that is a member of your view.

    var Sandbox = Backbone.View.extend({
    ...
        changeText: function () {...}
    });

When you want to execute the function, use the parenthesis. When you want to refer to the object, omit the the parenthesis.