Question

我遇到了在我尝试创建的自定义对话框小部件中调用私有/公共函数的问题。出于某种原因，当我尝试从_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（）函数。感谢您的帮助。

Answer 1

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

_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 {
             ;
           }
}

jQuery UI Widget Factory - 未定义JavaScript Reference Error函数

1 个答案: