添加自定義數據屬性語義UI下拉當項目通過Ajax

取回這裏是我是如何建立我的下拉列表（在HAML）：添加自定義數據屬性語義UI下拉當項目通過Ajax

#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

這是偉大的工作。我的.item元素有額外的數據，如.data('color')。我決定我想切換到ajax方法，而不是一次加載所有元素。

$.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()

這裏是我返回的JSON的樣子：

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

當我做console.log selectedItem.data()下拉列表中選擇改變之後，我只看到：

{ value: 1 }

和生成的HTML看起來像：

<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>

如何在使用Ajax時獲得包含自定義數據屬性的項目，例如data-color？

來源

2017-10-14 ardavis

具有鍵「結果」的數組在每個元素後缺少所有逗號 – Axel

這是創建問題時的拼寫錯誤。我會修復它！ – ardavis

我可以手動覆蓋下面的代碼語義UI菜單模板：

$.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

然後當我初始化我的下拉菜單中，我可以這樣做：

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

，讓我訪問每個下拉項目上的額外數據元素。如果有人有更好的方法來做到這一點，請讓我知道。

來源

2017-10-14 20:58:55 ardavis

添加自定義數據屬性語義UI下拉當項目通過Ajax

回答

相關問題