Trigger Backbone Event from another js function

Question

Looked around SO but couldn't find anything useful, so..

I have a Backbone.js contacts model with a contact card view. This view has many inputs where you can edit the contacts information.

I have many other forms on the page that are NOT backbone models, so they use a 'save button' to save. I basically want this save button to also trigger Contacts.CardView.saveCard(); (which could possibly be FileApp.cardView.saveCard as well? -- some of my code is below.

Is there any way to do this? I thought I could just use the following, but it seems it won't bind an event to anything outside the view?:

events: {
    "change input": "change",
    "click #save": "saveCard"
},
$('#save').click(function() {
    FileApp.cardView.saveCard;
    _SAVE.save();
})

CardView

window.Contacts.CardView = Backbone.View.extend({

    events: {
        "click #save": "saveCard" // doesnt work because #save is outside the view?
    },

    saveCard: function(e) {
        this.model.set({
            name:$('#name').val()
        });
        if (this.model.isNew()) {
            var self = this;
            FileApp.contactList.create(this.model, {
                success:function () {
                    FileApp.navigate('contacts/' + self.model.id, false);
                }
            });
        } else {
            this.model.save();
        }

        return false;
    }
}

Router:

var FileRouter = Backbone.Router.extend({
    contactCard:function (id) {
        if (this.contactList)  {
            this.cardList = new Contacts.CardCollection();
            var self = this;
            this.cardList.fetch({
                data: {
                    "id":id
                },
                success: function(collection, response) {
                    if (self.cardView) self.cardView.close();
                    self.cardView = new Contacts.CardView({
                        model: collection.models[0]
                    });
                    self.cardView.render();
                }
            });

        } else {
            CONTACT_ID = id;
            this.list();
        }
    }
});

var FileApp = new FileRouter();

tgriesser · Accepted Answer · 2012-04-30T02:58:09.090

One option is to create your own Events object for this case:

// Before initializing views, etc.
var formProxy = {};
_.extend(formProxy, Backbone.Events);

// Add the listener in the initialize for the CardView
window.Contacts.CardView = Backbone.View.extend({
  initialize : function() {
    formProxy.on('save', this.saveCard, this);
  },
  saveCard: function() {
    this.model.set({
        name:$('#name').val()
    });
    if (this.model.isNew()) {
        var self = this;
        FileApp.contactList.create(this.model, {
            success:function () {
                FileApp.navigate('contacts/' + self.model.id, false);
            }
        });
    } else {
        this.model.save();
    }
    return false;
  }
}

// Save
$('#save').click(function() {
   formProxy.trigger('save');
});

See: http://documentcloud.github.com/backbone/#Events

How can I implement this if I am using require.js with multiple files? — Lion789, Oct 28 '13 at 03:24

Trigger Backbone Event from another js function

1 Answers1