我正在尝试将 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 属性时,它应该正常工作。