循环浏览列表并生成挖空组件

Question

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

以下是将生成组件的 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>

这是它在父视图模型中循环遍历的数组：

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

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

开发人员工具：元素

但是我没有从我的 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 中出现问题？