Javascript 使用数据绑定初始化时，击出剑道径向规未正确绘制

在我的应用程序中遇到问题。 我试图通过数据绑定属性初始化它，但它似乎没有正确地调整大小

<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'
}

当这样做的时候，我的仪表看起来就像它应该的样子；

现在，我已经尝试使用常规剑道实现来创建它——这很好地工作，导致了正确绘制量规，如上图所示

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

---

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

一位同事建议对durandals附加事件上的仪表进行强制重画，这暂时解决了问题。此解决方案无法显示仪表的实际尺寸调整

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

---

我已经报告了这个问题。

只是出于好奇，你为什么反对重画？使用图形渲染进行更新或重画并不少见。当你将速度表选项设置为可见时会发生什么？@EricTaylor这只是为了强制重新绘制，看看它是否解决了问题——它解决了：原因是我使用信号器更新范围和值。通过更新scale.options.ranges[]，仪表会重新绘制自身，这就是我最初发现重新绘制使其符合我的要求的方式。目前，我只是从浏览器控制台重新绘制。明天我将尝试可观察的东西：@EricTaylor当它成为可观察的东西时，似乎没有什么不同。好的。我会在这里发布一个问题：。Ryan反应很快，他可能需要知道一些事情。还有一件事：确保你注意到杜兰达尔文档中关于击倒剑道的注释。我在一年多前发现了这个异常，并向Rob报告了它，这导致了这个警告。但后来我开始使用Durandal本身为Durandal编写自己的控件。

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