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

Posted 2021-05-05

我正在尝试绑定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”）;将被执行，但事实并非如此。

怎么解决这个？谢谢

答案

on方法仅适用于internal Backbone events，如add或remove，而不是像click这样的DOM事件。对于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
    }
});