KendoDropDownList 选项数据项答案

【问题标题】：KendoDropDownList Option Data ItemsKendoDropDownList 选项数据项
【发布时间】：2015-10-19 14:13:38
【问题描述】：

我想将 KendoDropDownList 合并到我的应用程序中，但是有一种情况我无法开始工作。现有应用程序将data- 属性添加到下拉列表的ListItem 类（因此呈现为<option data-xyz="abc" />）。这样做有一个合理的原因：该信息用于在客户端预填充表单，但我遇到的 kendoDropDownList 问题是它构建了自己的列表来表示列表项，但它没有t 带来这些数据属性。有没有办法将选择的列表项链接到原始项目，我可以在哪里获取数据属性？否则，我似乎根本无法使用该控件。

编辑：我使用数据属性和kendo.init 进行初始化。以下是 HTML：

<select .. data-role="dropdownlist" data-option-label="- Select -">
   <option data-x="y" value="..">..</option>
   <option data-x="y" value="..">..</option>
   .
   .
</select>

要初始化的Javascript是：

kendo.init('body');

我没有使用客户端 MVVM 绑定，仅供参考。然而，Kendo 使用表示下拉列表的 LI 元素构建 UL 元素，而不使用 OPTION 元素，因此在构建列表时，它不包括所有属性。

【问题讨论】：

您能否发布一些代码来展示您如何设置下拉菜单以及何时尝试获取所选选项？
以上更新，使用 kendo.init 加载带有 data- 初始化的主体。
看起来 kendo 实际上从原始 OPTION 元素中删除了数据属性并创建了新元素。因此，即使引用原始 OPTION 也不起作用。您可以使用按值而不是数据属性进行全局查找吗？
@BrianMains 有关于此的任何新信息吗？

标签： javascript html kendo-ui kendo-dropdown

【解决方案1】：

Kendo 重新创建元素，这就是它的属性丢失的原因。我建议一个包装函数，它在创建小部件之前复制data- 属性，然后在它再次设置属性之后：

$.fn.myDDL = function() {
  var el = $(this);
  var attrs = [];

  el.find("option").each(function() {
    attrs.push($(this).data());
  });

  el
    .kendoDropDownList()
    .find("option").each(function(i, e) {
      var keys = Object.keys(attrs[i]);

      for (var k = 0; k < keys.length; k++) {
        $(e).data(keys[k], attrs[i][keys[k]]);
      }
    });

  // Test
  var opt = $("#abc option:eq(0)").data();
  console.log(opt);
};

$(function()
{
    $("#abc").myDDL();
});

Demo

这很难看，我知道，但在这些情况下，剑道是有限的，并且不提供资源来处理它自己的结果。如果有可用的东西我不知道。恐怕模板不适用于您的情况。

【讨论】：

【解决方案2】：

您考虑过使用模板吗？

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-template

【讨论】：

我做到了，但希望数据属性方法能够奏效，因为我们有几个页面依赖于使用该技术......但如果这就是它所需要的，我会考虑。谢谢。