Question

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

编辑：我使用数据属性进行初始化，以及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元素，因此当它构建列表时，它不包含所有属性。

Answer 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

这很丑陋，我知道，但在这些情况下，剑道是有限的，并没有提供资源来处理自己的结果。如果有可用的东西，我不知道。我担心模板不能用于你的情况。

Answer 2

您是否考虑过使用模板？

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

KendoDropDownList选项数据项

2 个答案: