Выбор цвета в пользовательском интерфейсе Kendo завершается сбоем при добавлении атрибута привязки данных

Я пытаюсь использовать средство выбора цвета Kendo UI с привязкой Kendo и сталкиваюсь с проблемой.

Выбор цвета в пользовательском интерфейсе Kendo падает при нажатии кнопки "Применить" во всплывающем окне при добавлении атрибута привязки данных.

Когда я нажимаю кнопку "Применить", появляется сообщение об ошибке:

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, он работает как следует.

Источник

1 ответ

Мне кажется, что переменные не созданы правильно.

ЗДЕСЬ есть ссылка 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>

Дайте мне знать, если это не решит вашу проблему.

ЗДЕСЬ есть ссылка на демонстрацию, которую я использовал для исправления.

Источник
Другие вопросы по тегам