无法从模块模式的点击事件中获得预期的行为

Question

因此，我在JavaScript模块模式中没有太多处理事件处理程序的经验。

有一个实现该实现的功能：

//= require templates/modules/dvic_card_gallery
//=require templates/modals/dvic_modal_card_gallery

(function(exports) {
  'use strict';

  var Grill = exports.Grill,
    Whiskers = exports.Whiskers,
    $ = exports.$;

  // itialize the modal gallery's initial card to the sorcerer
  var selectedCardInstantCredit = 'card-sorcerer';


  var ModalCardGallery = Grill.ModuleView.extend({
    style_classes: ['modal_card_gallery'],
    template: Whiskers.modules.dvic_card_gallery,
    initialize: function() {
      exports.console.log('The Card Gallery module is initialized');
    },

    events: {
      'click .view-full-gallery': 'onClickLink',
      'click .sp-thumbnail': 'onClickThumbnail',
      'click .sp-forward': 'onClickForwardChevron',
      'click .sp-backward': 'onClickBackwardChevron'
    },
    onClickLink: function(e) {
      e.preventDefault();
      var modalConfig = {
        template: Whiskers.modals.dvic_modal_card_gallery,
        name: 'full-gallery',
        ctx_additions: this.ctx_additions(),
        linkEl: [e.target]
      };

      if (this.modal === undefined) {
        this.modal = new Grill.FullGalleryModalView(modalConfig);
        this.modal.show();
      } else {
        // if the modal has already been created and closed, reopen it
        this.modal.show();
      }
    },

    onClickThumbnail: function(e) {
      e.preventDefault();
      this.$clickedEl = $(e.currentTarget);

      // Tells us what card was clicked.
      var clickedCard =  this.$clickedEl.data("action").trim();
      selectedCardInstantCredit = clickedCard;

      // Hide all , then show what was clicked.
      $(".sp-slides .sp-slide").hide();
      $(".sp-slides .sp-slide." + clickedCard).show();
    },

    onClickForwardChevron: function(e) {
      e.preventDefault();
      galleryButtonClick(selectedCardInstantCredit, "forward");
    },

    onClickBackwardChevron: function(e) {
      e.preventDefault();
      galleryButtonClick(selectedCardInstantCredit, "backward");
    },

    render: function() {
      this.$el.html(this.template.render(this.model));
    }

  });

//==========================
  // Helpers
  //==========================
  var galleryButtonClick = function (cardName, direction) {
    // this array must match the card order in the template
    var cardsArray = [
      'card-sorcerer',
      'card-th',
      'card-frozen',
      'card-yoda',
      'card-pixie',
      'card-bb8',
      'card-tinker',
      'card-spotlight',
      'card-pals',
      'card-vader'
    ];
    var index = cardsArray.indexOf(cardName);

    $('.sp-slides .sp-slide').hide();

    // get the card to show
    if (direction === 'forward' && index === cardsArray.length -1) {
      selectedCardInstantCredit = cardsArray[0];
      $('.thumbnail-container').css("left", "150%");
    } else if (direction === 'forward') {
      selectedCardInstantCredit = cardsArray[index + 1];
    } else if (direction === 'backward' && index === 0) {
      selectedCardInstantCredit = cardsArray[cardsArray.length - 1];
    } else if (direction === 'backward') {
      selectedCardInstantCredit = cardsArray[index - 1];
    }

    $('.sp-slides .sp-slide.' + selectedCardInstantCredit).show();
  };

  ModalCardGallery.register('dvic_card_gallery', {});
})(this);

但是我试图在此处控制台日志：

onClickForwardChevron: function(e) {
          e.preventDefault();
          exports.console.log('is this working?');
          galleryButtonClick(selectedCardInstantCredit, "forward");
        },

但是我没有将消息记录到控制台。因此，我现在不确定如何测试此事件，以便可以开始添加一直想添加的实现。

我还尝试通过在此文件的帮助器部分的if条件中添加一个事件来进行尝试：

if (direction === 'forward' && index === cardsArray.length -1) {
      selectedCardInstantCredit = cardsArray[0];
      $('.thumbnail-container').css("left", "150%");

这是行不通的，但是其想法是让缩略图容器作为一个整体在用户不断单击V形臂的同时向左移动。

这是html文件：

<button class="sp-backward"></button>
          <div class="sp-slides">
            <div class="sp-slide card-sorcerer"><div role="img" aria-label="The Sorcerer Mickey card" class="card-image"></div><div class="card-title" aria-hidden="true">Sorcerer Mickey</div></div>
            <div class="sp-slide card-th"><div role="img" aria-label="The Diamond Celebration (2015-2016) card" class="card-image"></div><div class="card-title" aria-hidden="true">Diamond Celebration<br/>(2015-2016)</div></div>
            <div class="sp-slide card-frozen"><div role="img" aria-label="The Frozen card" class="card-image"></div><div class="card-title" aria-hidden="true">Frozen</div></div>
            <div class="sp-slide card-yoda"><div role="img" aria-label="The Yoda card" class="card-image"></div><div class="card-title" aria-hidden="true">Yoda</div></div>
            <div class="sp-slide card-pixie"><div role="img" aria-label="The Pixie Dust card" class="card-image"></div><div class="card-title" aria-hidden="true">Pixie Dust</div></div>
            <div class="sp-slide card-bb8"><div role="img" aria-label="The BB-8 card" class="card-image"></div><div class="card-title" aria-hidden="true">BB-8</div></div>
            <div class="sp-slide card-tinker"><div role="img" aria-label="The Tink card" class="card-image"></div><div class="card-title" aria-hidden="true">Tink</div></div>
            <div class="sp-slide card-spotlight"><div role="img" aria-label="The Spotlight card" class="card-image"></div><div class="card-title" aria-hidden="true">Spotlight</div></div>
            <div class="sp-slide card-pals"><div role="img" aria-label="The Mickey and Pals card" class="card-image"></div><div class="card-title" aria-hidden="true">Mickey & Pals</div></div>
            <div class="sp-slide card-vader"><div role="img" aria-label="The Darth Vader card" class="card-image"></div><div class="card-title" aria-hidden="true">Darth Vader</div></div>
          </div>
          <button class="sp-forward"/></button>
        </div>
        <div class="thumbnail-container">
          <button class="sp-thumbnail sorcerer ada-el-focus" data-action="card-sorcerer" title="View the Sorcerer Mickey card"></button>
          <button class="sp-thumbnail th ada-el-focus" data-action="card-th" title="View the Diamond Celebration card" id="box1"></button>
          <button class="sp-thumbnail frozen ada-el-focus" data-action="card-frozen" title="View the Frozen card" id="box2"></button>
          <button class="sp-thumbnail yoda ada-el-focus" data-action="card-yoda" title="View the Yoda card" id="box3"></button>
          <button class="sp-thumbnail pixie ada-el-focus" data-action="card-pixie" title="View the Pixie Dust card"></button>
          <button class="sp-thumbnail bb8 ada-el-focus" data-action="card-bb8" title="View the BB-8 card"></button>
          <button class="sp-thumbnail tinker ada-el-focus" data-action="card-tinker" title="View the Tink card"></button>
          <button class="sp-thumbnail spotlight ada-el-focus" data-action="card-spotlight" title="View the Spotlight card"></button>
          <button class="sp-thumbnail pals ada-el-focus" data-action="card-pals" title="View the Mickey and Pals card"></button>
          <button class="sp-thumbnail vader ada-el-focus" data-action="card-vader" title="View the Darth Vader card"></button>
        </div>
      </div>

Answer 1

它的范围，因此在您的代码中，您同时引用了modal视图和ModuleView。看起来Backbone和我有同样的问题。不确定您的经验水平，但是如果您打开了一个模态，那么您希望同时拥有以下内容：var ModalCardGallery = Grill.ModuleView.extend（代表模块页面）和var ModalCardGallery = Grill.ModalView.extend（代表模态视图）事件在模块视图中，其他事件在模式视图中。说到其中，也将那些事件分开。