无法从模块模式中的单击事件获得预期行为
Having trouble getting expected behavior from click event in module pattern
所以我没有太多在 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>
它的范围，所以在您的代码中您引用了 modal 视图，然后是 ModuleView。这看起来像 Backbone，我遇到了同样的问题。不确定你的经验水平，但如果你有一个打开的模态，那么你想要同时拥有这个：var ModalCardGallery = Grill.ModuleView.extend 用于模块页面然后这个：var ModalCardGallery = Grill.ModalView.extend 用于模态视图作为你的一些事件在模块视图中，其他事件在模态视图中。说到这里，把那些事件也分出来。
所以我没有太多在 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>
它的范围，所以在您的代码中您引用了 modal 视图，然后是 ModuleView。这看起来像 Backbone，我遇到了同样的问题。不确定你的经验水平，但如果你有一个打开的模态，那么你想要同时拥有这个：var ModalCardGallery = Grill.ModuleView.extend 用于模块页面然后这个：var ModalCardGallery = Grill.ModalView.extend 用于模态视图作为你的一些事件在模块视图中，其他事件在模态视图中。说到这里，把那些事件也分出来。