Differenza tra il rendering completo jQuery e il renderingItemData

Question

Sto cercando di capire la differenza tra renderItem e renderItemData.

Impossibile trovare la documentazione pertinente al riguardo.

Ho codice seguente:

$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
    var that = this, 
    currentCategory = ""; 
    $.each(items, function(index, item) { 
     if (item.category != currentCategory) { 
     ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
     currentCategory = item.category; 
     } 
     // with following code, when an element is selected 
     // in menu list, the corresponding value appears in searchbox 
     that._renderItemData(ul, item); 
     // with following code, when an element is selected 
     // in menu list, the corresponding value does NOT appear in searchbox 
     // I override renderItem below 
     **// that._renderItem(ul, item);** 

    }); 
    } 
}); 

function handleSearchBox() { 

    var data = [ 
    { label: "JAMES", category: "PEOPLE" }, 
    ]; 

    $("#search").catcomplete({ 
    delay: 0, 
    source: data, 
    select: function(event, ui) { 
     event.preventDefault(); 
     str = JSON.stringify(ui) 
     // with renderItemData, str = item in source data 
     // with renderItem str = {} 
     alert(str) 
     var selectedObj = ui.item.label 
     $("#search").val(selectedObj); 
    } 
    }); 
$("#search").data("custom-catcomplete")._renderItem = function(ul, item) { 
       return $("<li></li>").data("item.autocomplete", item) 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

} 

Il mio obiettivo è quello di stile personalizzato voci di menu li. Non sono sicuro di dove sto andando male.

Answer 1

renderItem costruisce l'elemento elenco effettivo (<li>) che deve essere aggiunto alla lista dei risultati

renderItemData è solo un metodo involucro che chiama renderItem e memorizza i dati associati (etichetta e valore) all'elemento creato. Questi dati vengono in seguito utilizzati durante la navigazione e la selezione e l'opzione dalla casella dei suggerimenti.

Troverete che il codice sorgente di entrambi è piuttosto semplice:

_renderItemData: function(ul, item) { 
    return this._renderItem(ul, item).data("ui-autocomplete-item", item); 
}, 

_renderItem: function(ul, item) { 
    return $("<li>") 
     .append($("<a>").text(item.label)) 
     .appendTo(ul); 
}, 

E si dovrebbe notare che _renderMenu chiama in realtà su _renderItemData:

_renderMenu: function(ul, items) { 
    var that = this; 
    $.each(items, function(index, item) { 
     that._renderItemData(ul, item); 
    }); 
},