0

我在尝试创建的自定义对话框小部件中调用私有/公共函数时遇到问题。出于某种原因，当我尝试从 _create() 方法调用名为 _clean() 的方法时，我在 Firebug 中不断收到错误消息，提示“引用错误：_clean 未定义”。这是我的代码：

(function($, window, document, undefined) {
$.widget("ui.supernovae", $.ui.dialog, {
    options: {
        // default options
        height: 700,
        width: 1500,
        maxWidth: 1500,
        autoOpen: false,
        disabled: true,
        draggable: false,
        title: "Supernovae v0.1",
        resizable: false,
        modal: true
    },

    _create: function() {
                $.ui.dialog.prototype._create.apply(this);  //call the constructor of the ui.dialog widget

                //set the variables needed - cache when appropriate
                var self = this.element,
                   options = self.options,
                   childList = self.find( "#supernovaTabs > li" )
                   progressBar = self.children( "#progressbarSupernova" ),
                    tabContent = $("#supernova_tab_content").children("div");

                var pvalue = 0;

                progressBar.progressbar({value: 33.3}); // set up the progress bar
                tabContent.find( "button" ).button({ icons: { primary: "ui-icon-search" } });

                $("#search1").bind('click', function(){
                    _clean(1);   // here is where the reference error occurs
                    var the_name = String($("#obj_name").val());
                    console.log("The name: " + the_name);
                    search(the_name, null, null, null);
                });

                $("#search2").bind('click', function(){
                    _clean(2);
                    var the_ra = parseFloat($("#obj_ra").val());
                    var the_dec = parseFloat($("#obj_dec").val());
                    var the_eplison = parseFloat($("#obj_epsilon").val());
                    search(null, the_ra, the_dec, the_eplison);
                });

                childList.on("click", function(event){
                   event.preventDefault();
                   childList.removeClass("selectedSupernovaTab");
                   $(this).addClass("selectedSupernovaTab");

                    tabContent.hide(); //Hide all tab content

                    //handle the progressbar animations to align correctly with the list items above
                    switch($(this).index()){
                        case 0:
                            pvalue = "33%";
                            break;
                        case 1:
                            pvalue = "66.4%";
                            break;
                        case 2:
                            pvalue = "100%";
                            break;
                    }
                   progressBar.children( ".ui-progressbar-value" ).animate({width: pvalue}, 700, 'easeOutCubic'); //animate the progressbar 

                    var activeDivId = $(this).find("a").attr("href");
                    $(activeDivId).fadeIn();
                });            
    },

    _clean: function(type) {
               $("div.item").remove();
           if(type == 1){
                 $("#obj_ra").val('');
                 $("#obj_dec").val('');
                 $("#obj_epsilon").val('');
           }else if(type == 2){
                 $("#obj_name").val('');
           }else{
                 ;
           }
    }
});     

})(jQuery, window, document);

function initSupernovaeExt(){
$("#supernovae").button({
    label:"Supernovae v0.1",
    icons: {primary:"ui-icon-snicon"}
});

$("#supernovae_dialog").supernovae({
    open: function( event, ui ) {
        //Set up the initial views
        tabContent.hide();  // Hide all tab content initially
        $("#searchSupernova").fadeIn({duration: 1000});     //fade in the first div content
    }
});

$("#supernovae").button().on("click.showSNExt", function(){
    $("#supernovae_dialog").supernovae("open");
});
}

我可能遗漏了一些非常简单的东西，但我似乎无法弄清楚为什么没有调用该函数。我只是想确保将点击处理程序绑定在正确的位置，并且在绑定处理程序之前解析 _clean() 函数。感谢所有的帮助。

4

1 回答 1

0

对于遇到此问题的其他任何人，我最终都解决了问题：在调用“私有”方法以及绑定点击处理程序时，我忘记使用“this”引用小部件实例，我意识到我必须在尝试使用 this._xxx() 调用小部件的方法之前，将“this”元素（小部件实例）保存在单独的变量中，否则“this”将引用点击处理程序中的目标元素。这是我更新的代码：

_create: function() {
            $.ui.dialog.prototype._create.apply(this);  //call the constructor of the ui.dialog widget

            //set the variables needed - cache when appropriate
            var self = this.element,
                that = this,
                options = self.options,
                childList = self.find( "#supernovaTabs > li" )
                progressBar = self.children( "#progressbarSupernova" ),
                tabContent = $("#supernova_tab_content").children("div");

            var pvalue = 0;

            progressBar.progressbar({value: 33.3}); // set up the progress bar
            tabContent.find( "button" ).button({ icons: { primary: "ui-icon-search" } });

            $("#search1").on('click', function(){
                that._clean(1);   // here is where the reference error occurs
                var the_name = String($("#obj_name").val());
                console.log("The name: " + the_name);
                //search(the_name, null, null, null);
            });

            $("#search2").on('click', function(){
                that._clean(2);
                var the_ra = parseFloat($("#obj_ra").val());
                var the_dec = parseFloat($("#obj_dec").val());
                var the_eplison = parseFloat($("#obj_epsilon").val());
                //search(null, the_ra, the_dec, the_eplison);
            });

            childList.on("click", function(event){
               event.preventDefault();
               childList.removeClass("selectedSupernovaTab");
               $(this).addClass("selectedSupernovaTab");

                tabContent.hide(); //Hide all tab content

                //handle the progressbar animations to align correctly with the list items above
                switch($(this).index()){
                    case 0:
                        pvalue = "33%";
                        break;
                    case 1:
                        pvalue = "66.4%";
                        break;
                    case 2:
                        pvalue = "100%";
                        break;
                }
               progressBar.children( ".ui-progressbar-value" ).animate({width: pvalue}, 700, 'easeOutCubic'); //animate the progressbar 

                var activeDivId = $(this).find("a").attr("href");
                $(activeDivId).fadeIn();
            });            
},

_clean: function(type) {
           $("div.item").remove();
           if(type == 1) {
               $("#obj_ra").val('');
               $("#obj_dec").val('');
               $("#obj_epsilon").val('');
           } else if(type == 2) {
               $("#obj_name").val('');
           } else {
             ;
           }
}
于 2013-07-16T15:57:44.347 回答