Javascript 带有KendoUI图表的KnockoutJS组件仅适用于最后一张图表

我有一个可观察的项目数组，可以创建带有参数的组件

在每个组件中，我使用该参数（通过AJAX）查询数据。我将该数据返回到一个可观察的数组中，并将该数组用作KendoUI图表的数据源

带有参数的已创建组件列表示例：

<csglist params="account:'08167526'"></csglist>
<hr>
<csglist params="account:'0873458'"></csglist>
<hr>
<csglist params="account:'0828337'"></csglist>
<hr>
<csglist params="account:'086778'"></csglist>

创建图表

 function createChart() {    
      $("#" + self.act() + "chart").kendoChart({
        dataSource: {
          data: ko.toJS(self.categoryChart)
            //, sort: { field: "category", dir: "asc" }
        },
        title: {
          text: self.type()
        },
        legend: {
          visible: true,
          position: "bottom"
        },
        seriesDefaults: {
          type: "bar",
          stack: true
        },
        series: [{
          field: "sales",
          name: "Current Sales",
          color: "#66110F"
        }, {
          field: "opp",
          name: "Opportunity",
          color: "#E65F5B"
        }],
        valueAxis: {
          //   max: 180,
          line: {
            visible: false
          },
          minorGridLines: {
            visible: true
          },
          visible: false
        },
        categoryAxis: {
          field: "category",
          majorGridLines: {
            visible: false
          }
        },
        tooltip: {
          visible: false,
          template: "#= series.name #: #= value #"
        }
      });
    }

但是当所有组件都被创建时，只有最后一个组件有数据

---

有人能告诉我为什么会发生这种情况吗？

当我将buildChart=函数更改为self.buildChart=函数时，它工作了

你应该粘贴你正在填充数组的代码部分，因为问题似乎就在那里。你已经把jQuery和Knockout结合起来了。您需要一个绑定处理程序。Roy J你是说，既然我在数组中使用这个绑定，我需要创建一个绑定句柄来应用它？我是说所有DOM操作（除了一些纯粹的装饰性操作）都属于绑定句柄。当然，任何涉及viewmodel的DOM操作都可以。jQuery选择器在viewmodel代码中是一种严重的代码气味。

 function createChart() {    
      $("#" + self.act() + "chart").kendoChart({
        dataSource: {
          data: ko.toJS(self.categoryChart)
            //, sort: { field: "category", dir: "asc" }
        },
        title: {
          text: self.type()
        },
        legend: {
          visible: true,
          position: "bottom"
        },
        seriesDefaults: {
          type: "bar",
          stack: true
        },
        series: [{
          field: "sales",
          name: "Current Sales",
          color: "#66110F"
        }, {
          field: "opp",
          name: "Opportunity",
          color: "#E65F5B"
        }],
        valueAxis: {
          //   max: 180,
          line: {
            visible: false
          },
          minorGridLines: {
            visible: true
          },
          visible: false
        },
        categoryAxis: {
          field: "category",
          majorGridLines: {
            visible: false
          }
        },
        tooltip: {
          visible: false,
          template: "#= series.name #: #= value #"
        }
      });
    }