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

【问题标题】：Looping through a list and generating knockout components循环遍历列表并生成淘汰赛组件
【发布时间】：2017-11-10 01:00:56
【问题描述】：

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

这里是生成组件的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']}
]);

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

Developer-Tools:Elements

但是，我没有收到来自 y1vsy2graphs 组件的任何错误消息。出于这个原因，我很难确定我的问题。

【问题讨论】：

当我放置

我得到 5 个图形标题。
你写对了吗register your component？
是的，如果我只是这样做 ` ` 图表渲染良好。循环以某种方式打破了它。

标签： javascript knockout.js viewmodel

【解决方案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 中出现问题？

【讨论】：

成功了！太感谢了。我必须找出为什么 foreach 会出现这样的问题。 :)
根据this example，您应该能够在foreach 中使用自定义元素...