javascript - jQuery 旋钮上的覆盖单位在页面重新加载时无法正确重绘

Question

我有一个只读 jQuery 旋钮。我已经能够向数字显示添加单位(按照 How to display units with Jquery Knob )，但是重新加载页面时，表盘的前景(即图形值指示器)不再显示。

这是我的 HTML:

<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >

({{工作负载}}是一个浮点Django模板值 - 它被正确替换)

在我的 jQuery 就绪函数中，我有:

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');