剣道UIデータバインド属性が追加されたときにカラーピッカーがクラッシュする

剣道のUIカラーピッカーと剣道のバインディングを使用しようとしているときに問題が発生しています。剣道UIデータバインド属性が追加されたときにカラーピッカーがクラッシュする

データバインド属性が追加されたときにポップアップで適用ボタンをクリックすると、剣道UIカラーピッカーがクラッシュします。

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

私は、データバインドを削除すると、それが動作属性：あなたがここでは例を見ることができます

Uncaught TypeError: Cannot read property 'attr' of null

：

は、私が上のボタンをクリックして適用すると、エラーがスローされます必要に応じて。

出典

2017-06-30 Yahor Ramanenka

変数が正しく作成されていないようです。

HEREは、Telerik Dojoのリンクを訂正したものです。

私がしたすべてはそれがあなたの問題が解決しない場合は、私に教えてください

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

に

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

を変更しました。

HEREは私が修正に使用したデモへのリンクです。

出典

2017-06-30 20:57:00

ありがとうございますが、その解決策はレンダリングテンプレートのロジックを変更するため、私の問題は解決しません。さまざまな種類の変数に異なるテンプレートを使用する必要があります。 –

剣道UIデータバインド属性が追加されたときにカラーピッカーがクラッシュする

答えて

関連する問題