jQuery Knob上的覆盖单元在页面重新加载时无法正确重绘

我有一个只读的jQuery旋钮。 我已经能够将单位添加到数字显示中（根据如何使用Jquery旋钮显示单位 ），但重新加载页面时不再显示表盘的前景（即图形值指示器）。

这是我的HTML：

（ {{ workload }}是一个浮点Django模板值 – 它被正确替换）

在我的jQuery ready函数中，我有：

 if (jQuery().knob && ! App.isIE8()) { // Workload Indicator $(".knob").knob({ 'dynamicDraw': true, 'min': 0, 'max':100, 'thickness': 0.2, 'tickColorizeValues': true, 'readOnly': true, 'skin': 'tron', 'fgColor': '#F00', 'inputColor':'#3D3D3D', 'bgColor': '#3D3D3D', 'width' : 150, 'draw' : function () { $(this.i).val( parseInt(this.cv) + '%'); } }); } 

fgColor最初是从模板值设置的，但上面的代码与硬编码的fgColor产生相同的结果。

注释draw回调按预期工作：旋钮绘制完成，中间有一个数值，外弧上有一个红色指示。 取消注释draw可修复数字格式（无小数点+百分号）。 数字格式对于初始显示和重新加载仍然是正确的。 但是红色弧只出现在初始显示屏上 – 当页面重新加载时它会消失！

那么发生了什么？ draw是否超越了jquery-knob自己的canvas绘制方法？ 如果是这样，我该如何调用图形绘制部分？

Answer 1

我能用这个：

 $('.knob').val(0).trigger('change').trigger('draw'); 

Answer 2

这是Sally Maughan（不是这个教区）发给我的解决方案：

 $(".knob").each( function () { this.value = Math.round( this.getAttribute('value') ); }).knob({ 'dynamicDraw': true, 'min': 0, 'max':100, 'thickness': 0.2, 'tickColorizeValues': true, 'readOnly': true, 'skin': 'tron', 'fgColor': wcol, 'inputColor':'#3D3D3D', 'bgColor': '#3D3D3D', 'width' : 150, 'draw' : function () { this.i.val( this.cv + '%'); } }); 

以上版本在每次重新加载时都使用HTML中的新值。 如果你想通过重新加载保持相同的值，那么Sally建议用以下代码替换this.value赋值：

 this.value = Math.round( this.value.replace('%','') );