1

我正在尝试将 Kendo UI 颜色选择器与 Kendo 绑定一起使用并遇到问题。

添加数据绑定属性时单击弹出窗口上的应用按钮时，Kendo UI 颜色选择器崩溃。

当我单击应用按钮时，它会引发错误：

Uncaught TypeError: Cannot read property 'attr' of null

您可以在此处查看示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet">
</head>
<body>
  
  <div id="variables">
    <div class="variables-grid">
      <div data-template="variable-template" data-bind="source: variables">
      </div>
    </div>
  </div>
  
  <script id="variable-template" type="text/x-kendo-template">
    # var templateId = getTemplateId(Type); #
    <div class="variable">
        <div data-template="#=templateId#" data-bind="source: this"></div>
    </div>
  </script>
  
  <script id="color-variable-template" type="text/x-kendo-template">
    <input class="k-input" data-bind="value: Value" id="color-picker-#=Id#" name="color-picker-#=Id#" type="color" /><script>
	jQuery(function(){jQuery("\#color-picker-#=Id#").kendoColorPicker({});});
    <\/script>
  </script>
    
</script>


</body>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  
  <script>
    
    function getTemplateId(typeId) {
      switch(typeId) {
        case 'color':
          return "color-variable-template";
      }
    }
    
    var viewModel = kendo.observable({
      variables: [
        {"Id": "abc-color", "Type": "color", "Name": "Color", "Value": "#ffffff"}
      ]
    });


    kendo.bind($("#variables"), viewModel); 
  </script>
</html>

当我删除 data-bind 属性时，它应该正常工作。

4

1 回答 1

0

在我看来，变量没有正确创建。

这里是一个 Telerik Dojo 链接，其中进行了更正。

我所做的只是改变

<div id="variables">
    <div class="variables-grid">
      <div data-template="variable-template" data-bind="source: variables">
      </div>
    </div>
</div>

至

<div id="variables">
  <div class="variables-grid">
    <div>
      <input data-role="colorpicker"
             data-bind="visibile: isVisible,
                        enabled: isEnabled,
                        value: selectedColor,
                        events: { change: onChange}">
    </div>
  </div>
</div>

让我知道这是否不能解决您的问题。

这是我用来进行更正的演示的链接。

于 2017-06-30T20:57:00.180 回答