Question

我为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>

以下是viewmodel的一部分

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];

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

Canvas在duidgetal + typescript的Widget中不起作用

0 个答案: