如何在BackboneJS的view元素上綁定事件？

Question

我正在嘗試在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”）; 將被執行，但不是。

如何解決呢？ 謝謝

Answer 1

on方法僅適用於內部Backbone事件（例如add或remove ，而不能用於DOM事件（例如click 。 對於DOM事件，您必須使用View的events哈希/方法，可以在自定義視圖類中指定該哈希/方法，也可以將其作為選項傳遞給View構造函數。

對於您的代碼，如果視圖類定義模糊不清，則可以使用2nd選項（傳遞給構造函數）：

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