javascript - 小部件内的类的冒泡事件？

Question

我拼命尝试从我编写的类(class)中触发一个事件。我在 YUI 小部件中使用此类，并且希望我的 YUI 小部件能够响应触发的事件。我知道事件冒泡是如何工作的，所以这里的代码工作得很好:

    YUI().use('event-custom', 'node', function (Y) {

function Publisher(bubbleTo) {
        this.addTarget(bubbleTo);
        this.publish("testEvent", {
            emitFacade: true
        });
        this.fire("testEvent");
}

function BubbleTarget() {

    this.on("testEvent", function (e) {Y.log("Bubbling in Test.js succeed!")});
    var newPublisher = new Publisher(this);
}
// To fire events or be a bubble target, augment a class with EventTarget
Y.augment(Publisher, Y.EventTarget);
Y.augment(BubbleTarget, Y.EventTarget);

var bubbleTarget = new BubbleTarget();});

但是，当我尝试将这个概念应用到我的小部件时，我失败得很厉害。

YUI.add("SlideShow", function(Y) {

function SlideShow(config) {
    SlideShow.superclass.constructor.apply(this, arguments);
}

SlideShow.NAME = "SlideShow";

Y.extend(SlideShow, Y.Widget, {
    initializer: function() {   
        Y.log("Widget loaded!");
        this.on("testEvent", function () {
                Y.log("This should, but won't appear despite how hard I try!");
          });
    },

    renderUI: function(){
        var testSlide = new Slide("text", this);
    }
});

Y.SlideShow = SlideShow;

function Slide(sendTo)
{
this.addTarget(sendTo);
    this.publish("testEvent", {
        defaultFn: function(){Y.log('Event published.')},
        emitFacade: true
    });
    this.fire("testEvent");
}

Y.augment(Slide,Y.EventTarget, true, null, {emitFacade: true});
}, "0.0.1", {requires:["widget","event-custom","node","anim"]});

Chromium 中的日志输出是:

• Test.js 中的冒泡成功!
• 小部件已加载!
• 事件已发布。

看来我真的很怀念 Widget 的一些重要内容。请帮助我更好地理解这个主题。

Answer 1

我认为答案就在米奇的帖子中。您需要在气泡目标订阅上为事件添加前缀。所以而不是:

this.on("testEvent", function () {
    Y.log("This should, but won't appear despite how hard I try!");
});

尝试:

this.on("*:testEvent", function () {
    Y.log("This should, but won't appear despite how hard I try!");
});

或者在您的 Slide 类上设置 .NAME(无论如何您都应该这样做):

Slide.NAME = "Slide";

然后您的前缀使用该值:

this.on("Slide:testEvent", function () {
    Y.log("This should, but won't appear despite how hard I try!");
});

使用 Y.Base.create 将删除大量样板文件。