Knockout.js 画布在durandal+typescript的小部件中不起作用

我为durandal+typescript项目编写了一个小部件。小部件包含一个画布。但画布只显示一次。其他html元素工作良好，它们显示的时间与我调用widget的时间相同

以下是小部件视图文件：

<section class="leftbarchart" data-bind="foreach: { data: settings.items }">
    <canvas width="330" height="72"></canvas>
    <div class="text-scale">
      <div style="float: left;width:50px;" data-bind="text: $data[Object.keys($data)[0]].labels[0]"></div>
      <div style="float: right;width:50px;text-align: right;" data-bind="text: $data[Object.keys($data)[0]].labels[2]"></div>
      <div style="text-align: center" data-bind="text: $data[Object.keys($data)[0]].labels[1]"></div>
    </div>
</section>

如果我将索引更改为[0]，它只显示第一个小部件的画布。它是[6]，只显示第7个小部件的画布。

---

如何让每个小部件都显示画布？

这是一个很难回答的问题，因为它有点复杂。很难知道这里发生了什么。如果你有一个小部件，你应该能够在不同的地方独立地绑定它。然后，每个小部件将只有一个子画布。这就是您在小部件的viewModel中返回构造函数的目标？如果没有，那么您手中就有一个singleton viewModel，这将导致画布或画布背后的逻辑被共享。您可以发布整个viewModel，但不发布TypeScript，即发出的JavaScript吗？可能无效，但：使用循环？

private canvas :HTMLCanvasElement;
private ctx :CanvasRenderingContext2D ;

public attached(element:HTMLElement){
        this.canvas = element.getElementsByTagName("canvas")[6];//<HTMLCanvasElement>$('canvas', element)[0];//
        this.ctx = this.canvas.getContext("2d");
        this.drawLine(this.ctx, this.origin[0], this.origin[1], this.origin[0] + this.width, this.origin[1]);
        this.drawLine(this.ctx, this.origin[0], this.origin[1] + this.height, this.origin[0] + this.width, this.origin[1] + this.height);

        for (var i = 0; i < 5; i++) {
            this.drawLine(this.ctx, this.origin[0] + this.unitWidth * 2 + this.unitWidth * i, this.origin[1], this.origin[0] + this.unitWidth * 2 + this.unitWidth * i, this.origin[1] + this.height, [1.5]);
        }

        this.drawCurrentBar(this.ctx, 0.7);
        this.drawLastBar(this.ctx, 0.9);
        this.wrapText(this.ctx, "Business Performance", 20, 40, 50, 20);
    }

this.canvas = element.getElementsByTagName("canvas")[6];