使用数据绑定初始化时，Knockout-kendo径向量表无法正确绘制

Question

我的申请中遇到Knockout-Kendo radial gauge的问题。 我正在尝试通过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(); });    
};

我已报告问题here。