如何在BackboneJS中绑定视图元素上的事件?

时间:2017-12-25 09:51:58

标签: javascript backbone.js

我正在尝试在div上绑定一个click事件(在骨干视图中)

以下是我为其创建视图和设置事件的代码

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);

这是视图模板:

<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>

我预计当我点击带有class =“download-pdf”的div时,console.log(“ff”);将被执行,但事实并非如此。

如何解决这个问题? 谢谢

1 个答案:

答案 0 :(得分:3)

on方法仅适用于internal Backbone events,例如addremove,而不是 DOM 诸如click之类的事件。对于DOM事件,您必须使用View的events哈希/方法,该方法可以在自定义视图类中指定,也可以作为选项传递给View构造函数。

对于您的代码,其中视图类定义被遮挡,您可以使用第二个选项(传递给构造函数):

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
    }
});