Ractivejs：如何从动态添加的组件中收集值？

参考：

我的组件有一个选择框：

var ListItem=Ractive.extend{ 模板：` 选择颜色 红色 绿色 蓝色 ` } 主应用程序可以通过单击“添加”动态添加组件：

var ractive=新ractive{ el:“集装箱”， 模板：`

add

{{colors}}

{{list}} {{/list}}`， 数据：{list:[]}， 计算：{ 颜色{ var items=this.findAllComponents'listItem' cols=[]

---

forvar i=0；iAFAIK，Ractive依赖项是基于数据键路径的，所以我猜这就是为什么调用它。findAllComponents'listItem'没有为它添加依赖项。我尝试添加一个调用。get'list'，但这会使计算的依赖项在添加新组件之前被调用。我知道您可以将观察者延迟到模板之后渲染发生，因此您可能需要使用而不是计算的。

您应该使用组件自己的数据来封装组件。组件外部的值作为参数传递给组件，当数据绑定时，您将始终使用父数据，而不是组件内的数据

这就是组件：

var ListItem=Ractive.extend{ 数据：{color:}， 模板：` 选择颜色 红色 绿色 蓝色 ` } 正如您所看到的，它有自己的数据块

现在，我们从父级注入数据：

var ractive=新ractive{ el:“集装箱”， 模板：`

add

{{colors}}

{{list}} {{/list}}`， 数据：{list:[]}， 计算：{ 颜色{ var items=this.get'list'； cols=[]

---

forvar i=0；我感谢你抽出时间来研究这个问题，几天后我最终得出了相同的结论。清楚且非常有用，感谢你抽出时间来帮助我，Andy