Возникли проблемы при получении ожидаемого поведения от события click в шаблоне модуля - PullRequest
Новая
       26

Возникли проблемы при получении ожидаемого поведения от события click в шаблоне модуля

0 голосов
/ 31 августа 2018

Так что у меня нет большого опыта работы с обработчиками событий в шаблоне модуля 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%");

Это не работает, но идея состоит в том, чтобы заставить контейнер миниатюр в целом перемещаться влево, когда пользователь продолжает нажимать шеврон вперед.

Вот 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>

1 Ответ

0 голосов
/ 31 августа 2018

Область его действия, поэтому в вашем коде вы ссылаетесь на modal представлений, а затем ModuleView. Это похоже на Backbone, и у меня была та же проблема. Не уверен, что ваш уровень опыта, но если у вас есть модальное окно, которое вы открываете, вы хотите, чтобы оба: var ModalCardGallery = Grill.ModuleView.extend для страницы модуля, а затем это: var ModalCardGallery = Grill.ModalView.extend для модального представления, так как некоторые из ваших событий находятся в модуле вид и другие в модальном виде. Говоря об этом, выделите и эти события.

...