mvp - How can I add Ractive instances to a list? in a parent Ractive instance? -

i have ractive instance (or component - either) , want add list in ractive instance. this:

var listitemone = new ractive({   data: { key: "hello" } });  var listitemtwo = new ractive({   data: { key: "world" } });  var ractive = new ractive({   el: "#output",   template: "#template",   data: { greeting: 'hi', name: 'there',       listitems: [         listitemone,         listitemtwo       ]     } }); 

template:

<p>{{greeting}} {{name}}!</p>  <ul>   {{#listitems}}   <li>{{key}}</li>   {{/listitems}} </ul> 

jsbin

or using method:

var ractive = new ractive({   el: "#output",   template: "#template",   data: {     greeting: 'hi', name: 'there',     listitems: []    },    addlistitem: function(listitem){     this.get('listitems').push(listitem);   } });  ractive.addlistitem(listitemone); ractive.addlistitem(listitemtwo); 

jsbin

is possible use ractive in way?

---

please note not want this:

var ractive = new ractive({   el: "#output",   template: "#template",   data: { greeting: 'hi', name: 'there',       listitems: [         { key: "hello" },         { key: "world" }       ]     } }); 

as have ractive instances/components, , using mvp define explicitly define interface between application , view.

the items in list ractive instances, have call method access data if want use them way (see http://jsbin.com/nomutofati/1/edit?html,js,output):

<ul>   {{#listitems}}   <li>{{this.get('key')}}</li>   {{/listitems}} </ul>