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

Question

参考：this jsbin

我的组件有一个选择框：

var ListItem = Ractive.extend({
  template:`<select value='{{color}}'>
            <option disabled selected value=null>select color</option>
            <option value='red'>red</option>
            <option value='green'>green</option>
            <option value='blue'>blue</option>
            </select>`
})

并且主应用程序可以通过单击'添加'来动态添加组件：

var ractive = new Ractive({
  el:'#container',
  template:`<p on-click='@this.add_comp()'>Add</p>
            <p>{{colors}}</p>
            {{#list}}
            <listItem />
            {{/list}}`,
  data:{ list: []},
  computed:{
    colors(){
      var items = this.findAllComponents('listItem')
      cols=[]
      for(var i=0; i<items.length; i++){
        cols[i] = items[i].get('color')
      }
      return cols
    }
  },
  components:{ listItem: ListItem },
  add_comp(){ this.push('list',{})}
})

我需要将组件的选择框的值作为数组收集到父级中，例如['red','green','blue']但是，当添加组件并选择颜色时，阵列不会更新。

您能提供的任何见解将不胜感激。预先感谢。

Answer 1

AFAIK，Ractive依赖关系基于数据键路径，因此我猜测为什么调用this.findAllComponents('listItem')不会为其添加依赖关系。我尝试添加对this.get('list')的调用，但这使计算的get在添加新组件之前被调用。我知道您可以defer一个观察者，直到模板渲染完成后为止，因此您可能需要使用Oberserver而不是计算机。