は、カスタムデータを追加アイテムはここでAjaxを

Question

経由で取得されたときに意味UIのドロップダウンに属性私は（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 

これは素晴らしい仕事をしていました。私の.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は次のようになります。変更された私は選択のドロップダウン後console.log selectedItem.data()を行うと

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

、私は以下を参照してください。

{ 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などのカスタムデータ属性を含むアイテムを取得するにはどうすればよいですか？

Answer 1

私は手動で次のコードでセマンティック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'] 

私にできること各ドロップダウンアイテムの余分なデータ要素にアクセスします。誰かがこれを行うより良い方法を持っている場合は、私に知らせてください。