How can I create external button to manipulate the cells

Question

I would like to have external buttons outside that could do some actions on the graph.

App.MainView = joint.mvc.View.extend({

    events: {
        'click #multiplyBtn': 'testCell'
    },

    testCell: function() {
        console.log('hi');
        console.log(this.selection);
    },

I've tried including it into main.js like this but it doesn't work.

I also tried setting jquery event handler but I'm not sure where to put the code as I always get undefined value of the selection

Answer 1

the events hash references work within the View. In your code it assumes that #multiplyBtn is part of the view's template. If you want to attach a view method to an "external" element action you have to use jQuery to do the binding in the view's init method:

initialize: function () {
  $('#multiplyBtn').on('click', this.testCell.bind(this));
}