benutzerdefinierte Daten hinzufügen Attribute Semantic UI Dropdown, wenn Einzelteile über Ajax

Question

Hier abgerufen werden, ist, wie ich meine Drop-Down war der Bau (in haml):

#my_dropdown.ui.dropdown{ data: { path: objects_path } } 
    = f.hidden_field :my_id 
    %i.dropdown.icon 
    .default.text Text 
    .menu 
    - @collection.each do |object| 
     .item{ data: { value: object.id, text: object.name, color: object.color } } 
     = object.name 

Dieser große arbeitete. Meine .item Elemente hatten zusätzliche Daten wie .data('color'). Ich entschied, dass ich zu einem Ajax-Ansatz wechseln wollte, anstatt alle Elemente gleichzeitig zu laden.

$.fn.api.settings.api = 
    'search objects': $('#my_dropdown').data('path') + '?q={query}' 

$('#my_dropdown').dropdown 
    apiSettings: 
     action: 'search objects' 

    onChange: (value, text, selectedItem) -> 
     console.log selectedItem.data() 

Hier ist, was meine zurück JSON wie folgt aussieht:

{ 
    "success":true, 
    "results": [ 
    { "name":"Object #1", "value":1, "color":"blue" }, 
    { "name":"Object #2", "value":2, "color":"red" }, 
    { "name":"Object #3", "value":3, "color":"green" } 
    ] 
} 

Als ich die console.log selectedItem.data() tun nach dem Drop-Down-Auswahl geändert wird, sehe ich nur:

{ value: 1 } 

Und das erzeugte HTML sieht so aus:

<div class="item" data-value="1">Object #1</div> 
<div class="item" data-value="2">Object #2</div> 
<div class="item" data-value="3">Object #3</div> 

Wie kann ich die Elemente dazu bringen, die benutzerdefinierten Datenattribute zu enthalten, z. B. data-color, während Ajax verwendet wird?

Answer 1

Ich konnte das Semantic UI-Menü-Vorlage mit dem folgenden Code manuell außer Kraft setzen:

$.fn.dropdown.settings.templates = 
    menu: (response, fields) -> 
    values = response[fields.values] or {} 
    html = '' 
    $.each values, (index, option) -> 
     extraData = '' 
     $.each fields.extraAttrs, (_j, attr) -> 
     if option[attr] 
      extraData += "data-#{attr}='" + option[attr] + "''" 

     maybeText = if option[fields.text] then 'data-text="' + option[fields.text] + '"' else '' 
     maybeDisabled = if option[fields.disabled] then 'disabled ' else '' 
     html += '<div class="' + maybeDisabled + 'item" data-value="' + option[fields.value] + '"' + extraData + maybeText + '>' 
     html += option[fields.name] 
     html += '</div>' 
     return 
    html 

Dann, wenn ich mein Dropdown bin initialisiert, was ich tun kann:

$('#my_dropdown').dropdown 
    apiSettings: 
     action: 'search objects' 
    fields: 
     extraAttrs: ['color'] 

Das erlaubt mir um auf zusätzliche Datenelemente in jedem der Dropdown-Elemente zuzugreifen. Wenn jemand eine bessere Möglichkeit hat, dies zu tun, lass es mich wissen.