How to bind event on view element in BackboneJS?

Question

I'm trying to bind a click event on a div (which is inside a backbone view)

Here is the code which I create the view and set event for it

dialogModel = new Dialog.SimpleWindowModel({
                title: 'export:export.dialog.title',
                data: {
                    message: 'export:export.dialog.message',
                    downloadPDF: 'export:export.dialog.downloadPDF',
                    shareByQRCode: 'export:export.dialog.shareByQRCode',
                    sendEmail: 'export:export.dialog.sendEmail',
                },
                bodyTemplate: exportTpl,
            });

dialogView = new Dialog.WindowView({ model: dialogModel });

dialogView.on('click .download-pdf', function () {console.log("ff");});
dialogView.on('click .share-qr-code', ExportAction.shareByQRCode);
dialogView.on('click .send-email', ExportAction.sendEmail);

This is the view template:

<div class="export-button-container">
  <div class="btn export-button download-pdf">
      <img src="https://betanews.com/wp-content/uploads/2015/09/PDF.jpg"/>
      <p class='dialog-message' data-i18n>{{downloadPDF}}</p>
  </div>
  <div class="btn export-button share-qr-code">
      <img src="https://www.qrstuff.com/images/sample.png"/>
      <p class='dialog-message' data-i18n>{{shareByQRCode}}</p>
  </div>
  <div class="btn export-button send-email">
      <img src="https://d1hoh05jeo8jse.cloudfront.net/media/google/gmail-icon.jpg"/>
      <p class='dialog-message' data-i18n>{{sendEmail}}</p>
  </div>
</div>

I expected that when I click the div with class="download-pdf", console.log("ff"); will be executed, but it wasn't.

How to solve this? Thank you

Not sure why this question deserves a downvote, lol. – 0xh8h Dec 25 '17 at 11:25 — 0xh8h, Dec 25 '17 at 11:25

hindmost · Accepted Answer · 2017-12-25T10:38:39.467

3

on method is only intended for use with internal Backbone events such as add or remove, not DOM events such as click. For DOM events you have to use View's events hash/method which can be specified in a custom view class or passed as an option to a View constructor.

For your code, where view class definition is obscured, you may use the 2nd option (passing to constructor):

dialogView = new Dialog.WindowView({
    model: dialogModel,
    events: {
        'click .download-pdf': function () {console.log("ff");},
        'click .share-qr-code': ExportAction.shareByQRCode,
        'click .send-email': ExportAction.sendEmail
    }
});

edited Dec 25 '17 at 10:38

answered Dec 25 '17 at 10:15

hindmost

7,125
3
27
39

Can you please provide an example code? The link about View's events is very confused, it's still internal Backbone events – 0xh8h Dec 25 '17 at 10:21
Ah, do you mean that we have to add all events inside "events" hash of the model? – 0xh8h Dec 25 '17 at 10:36
_The link about View's events is very confused.._ Imho that docs is quite comprehensible and even has a code example. What does exactly confuse you there? – hindmost Dec 25 '17 at 10:45
I thought that we need to add those events to the place where we define initialize, render methods. Now I know that we can pass them as parameters :D Thank you very much. One more thing, if my Dialog.WindowView view has 2 events already, does this stack up so that dialogView has 5 events in total? Or just 3 events and get rid of 2 existing events? – 0xh8h Dec 25 '17 at 11:06
2

_if my Dialog.WindowView view has 2 events already, does this stack up so that dialogView has 5 events in total?_ AFAIK options passed to a constructor **aren't merged** with respective class properties, but **replace** them instead. So `events` hash passed to a constructor will override/replace its counterpart defined in class. – hindmost Dec 25 '17 at 14:37
1

@HoangTrinh If you ever want to create a base class where sub-class events are merged with the base class defaults, check out [how to create a good base class for Backbone](https://stackoverflow.com/a/40982556/1218980). – Emile Bergeron Dec 30 '17 at 05:16

How to bind event on view element in BackboneJS?

1 Answers1