Question

我有一个基类，其他几个类扩展自。我想在基类中添加一个带有两个按钮的通用对话框功能。然后，我想让所有从这个基类扩展的类能够调用这个函数来显示对话框。我得到了这部分工作。现在，我想将从基类推送到子类的任一按钮的事件冒泡。这样，任何子类都可以调用它（传入不同的字符串以显示不同的消息）并以不同方式处理单击事件。有人对如何做到这一点有任何建议吗？这就是我到目前为止所做的：

基类：

var BaseClassView= Backbone.View.extend({
    //all my stuff
},{
//create dialog
showMsgDialog: function(message, id){
        if ($(window).data('blockUI.isBlocked')) {
            return;
        }
        this.deleteReportId = id;
        var yesButton = document.createElement('button');
        var y=document.createTextNode("Yes");
        yesButton.id = "dialogYes";
        yesButton.onclick=this.dialogResponseYes;
        yesButton.appendChild(y);


        var noButton = document.createElement('button');
        var n = document.createTextNode("No");
        noButton.id = "dialogNo";
        noButton.appendChild(n);

        var div1 = document.createElement("div");
        div1.style.color = "black";
        div1.style.width = "100%";
        div1.style.height = "66%";
        div1.innerHTML = message;
        div1.style.font.size = "15pt"

        var div = document.createElement("div");
        div.id = "questionDlg";
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.background = "white";
        div.style.color = "white";
        div.style.cursor = "default";
        div.style.display = "inline";
        div.appendChild(div1);
        div.appendChild(yesButton);
        div.appendChild(noButton);

        $.blockUI({
            message: div,
            css: {
                width: '200px',
                height: '100px',
                border: '1px solid blue',
                padding: '15px',
                backgroundColor: 'white',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: 1,
                color: '#fff',
                fontSize: '26px',
                fontFamily: "'Helvetica Neue', Helvetica"
            }
        });
    },
    dialogResponseYes:function(e){
        var test = e;
        //throw event and parameter to child class

    },
    dialogResponseNo:function(e){
        var test = e;
        //throw event and parameter to child class
    },

});

儿童班：

var MyListView = BaseClassView.extend({
    events: {
        //my events   

    },
    initialize: function(options){

    },
    render: function() {
       //do stuff
    },
deleteReportClick:function(e){
    try {
       //stuff here, this works.  Removed for brevity
       ActivityDBView.showMsgDialog('Delete Report?', getReportId);          

    } catch (err) {
        window.app.displayError("Error Deleting Report.");
    }
},

dialogResponseYes: function(e){
   //catch event here
},
dialogResponseNo: function(e){
   //catch event here
}
});

Answer 1

短版

在您的具体情况下，您的问题是您没有正确调用显示消息对话框，您想要做的是从您的子类调用它，以便它上升到原型链（或直接在它的父类上调用它））。

所以而不是

ActivityDBView.showMsgDialog('Delete Report?', getReportId);

使用

this.showMsgDialog('Delete Report?', getReportId);

这是jsbin

更长的版本

通常，您要做的是在基类中声明事件，然后在那里提供默认处理程序，或者在子类中覆盖它。

如果您正在使用主干事件哈希，那么您可以做的是在基类中将事件哈希声明为正常，然后在您的子类中，如果要添加唯一的事件，则可以使用它的原型扩展事件哈希孩子班。在您的子类的任何方法中，您也可以使用它的原型调用它的基类的版本。

例如，扩展事件哈希

 var MyListView = BaseClassView.extend({

  events: _.extend({
      //events that are just in the child class
    }, BaseClassView.prototype.events),

同样，如果要在子类方法中调用基类方法，可以使用它的原型调用它

dialogResponseYes: function(e){
   BaseClassView.prototype.dialogResponseYes.call(this);
   //catch event here
},

从基类到子级的泡沫事件

1 个答案: