添加自定义数据属性语义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

回答

相关问题