Question

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

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

当我点击“应用”按钮时，它会抛出一个错误：

Uncaught TypeError: Cannot read property 'attr' of null

您可以在此处查看示例：

＆＃13;

<!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>

＆＃13;

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

Answer 1

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

HERE是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>

如果这不能解决您的问题，请告诉我。

HERE是我用来进行修正的演示的链接。

当数据绑定属性添加

1 个答案: