Question

所以我想从具有属性的对象数组中动态生成knockout组件。

这是将生成组件的html（事先为可怕的组件名称道歉）：

 <div data-bind="foreach: graphs">
               <y1vsy2graphs params=" graphTitle: $data.y1Title + ' vs ' + 
                                      $data.y2Title,
                                      y1Title: $data.y1Title,
                                      y2Title: $data.y2Title,
                                      tickInterval: $parent.tickInterval(),
                                      y1suffix: '',
                                      y2suffix: '',
                                      graphID: 'red',
                                      filter: $parent.filter(),
                                      selectedOption: 
                                      $parent.selectedOption(),
                                      url: 
                      Urls.get_ppc_dashboard_values(PageMeta.AccountToken)">
                </y1vsy2graphs> 
</div>

这是在父viewModel中循环的数组：

self.graphs = ko.observableArray([
{'y1Title': 'Cost', 'y1Data': self.datas()['Cost'],'y2Title':'ROI', 'y2Data': self.datas()['ROI']},
{'y1Title': 'Clicks','y1Data': self.datas()['Clicks'], 'y2Title': 'CPC', 'y2Data': self.datas()['CPC']},
{'y1Title': 'IMP','y1Data': self.datas()['IMP'], 'y2Title': 'CTR','y2Data':self.datas()['CTR']},
{'y1Title': 'Conv','y1Data': self.datas()['Conv'], 'y2Title': 'CPA', 'y2Data':self.datas()['CPA']},
{'y1Title': 'Conv','y1Data': self.datas()['Conv'],'y2Title': 'RPS', 'y2Data': self.datas()['RPS']}
]);

目前我的代码确实创建了开发人员工具中显示的元素：

Developer-Tools:Elements

但是我没有从y1vsy2graphs组件收到任何错误消息。出于这个原因，我正在努力识别我的问题。

Answer 1

试试这个：

<div data-bind="foreach: graphs">
  <div data-bind="component: { name: 'y1vsy2graphs', 
                               params: {
                                  graphTitle: $data.y1Title + ' vs ' + $data.y2Title,
                                  y1Title: $data.y1Title,
                                  y2Title: $data.y2Title,
                                  tickInterval: $parent.tickInterval(),
                                  y1suffix: '',
                                  y2suffix: '',
                                  graphID: 'red',
                                  filter: $parent.filter(),
                                  selectedOption: $parent.selectedOption(),
                                  url: Urls.get_ppc_dashboard_values(PageMeta.AccountToken)
                                }
                              }">
  </div>
</div>

基本上是一样的，但我猜自定义元素可能会在foreach中出现问题？

循环遍历列表并生成淘汰组件

1 个答案: