javascript - 使用数据绑定初始化时，Knockout-kendo 径向量规未正确绘制

Question

我的应用程序中的Knockout-Kendo 径向量规出现问题。我正在尝试通过 data-bind 属性对其进行初始化，但它似乎没有正确调整自身的大小。

<div id="speedGauge" data-bind="kendoRadialGauge: $parent.speedGaugeOptions"></div>
...
self.speedGaugeOptions = {
    renderAs: 'svg',
    value: 0,
    gaugeArea: {
        background: 'transparent'
    },
    pointer: {
        color: 'lightgray',
        animation: {
            speed: 100
        }
    },
    scale: {
        minorUnit: 75,
        majorUnit: 150,
        startAngle: -40,
        endAngle: 220,
        max: 300,
        min: -300,
        labels: {
            position: 'inside',
            font: '10px Arial,Helvetica,sans-serif'
        },
        ranges: [
                {
                    from: -300,
                    to: -200,
                    color: "darkgray"
                },
                {
                    from: 300,
                    to: 200,
                    color: "darkgray"
                }
        ],
        rangeSize: 5,
        rangeDistance: -5,
        rangePlaceholderColor: '#f2f2f2'
}

有趣的部分来了；当页面被激活（使用 durandal）时，仪表会像这样绘制：

为了使仪表正确缩放并适合灰色圆圈，我必须像这样重新绘制它（从浏览器控制台或在 .js 文件中）：

$("#speedGauge").data("kendoRadialGauge").redraw()

这样做时，我的仪表看起来像预期的那样；

现在，我尝试使用常规的 Kendo 实现来创建它——效果很好，可以正确绘制仪表，如上图所示；

<div id="speedGauge"></div>
...
self.activate = function () { 
   createGauge();
}
...
function createGauge() {
    $("#speedGauge").kendoRadialGauge({
        renderAs: 'svg',
        value: 0,
        gaugeArea: {
            background: 'transparent'
        },
        pointer: {
            color: 'lightgray',
            animation: {
                speed: 100
            }
        },
        scale: {
            minorUnit: 75,
            majorUnit: 150,
            startAngle: -40,
            endAngle: 220,
            max: 300,
            min: -300,
            labels: {
                position: 'inside',
                font: '10px Arial,Helvetica,sans-serif'
            },
            ranges: [
                    {
                        from: -300,
                        to: -200,
                        color: "darkgray"
                    },
                    {
                        from: 300,
                        to: 200,
                        color: "darkgray"
                    }
            ],
            rangeSize: 5,
            rangeDistance: -5,
            rangePlaceholderColor: '#f2f2f2'
        }
    });
}

有谁知道这里可能出了什么问题？

Answer 1

一位同事建议在 durandals 附加事件上强制重新绘制仪表，这暂时解决了问题。使用此解决方案看不到仪表的实际大小调整。

self.attached = function(element) {
    $(element).find("[data-role='radialgauge']").each(function () { $(this).data("kendoRadialGauge").redraw(); });    
};

我已经在这里报告了这个问题。