如何將Ractive實例添加到列表中？在父Ractive實例中？

Question

我已經有一個Ractive instance（或component - 它可能是），我想將它添加到另一個Ractive實例的列表中。事情是這樣的：

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

模板：

<p>{{greeting}} {{name}}!</p> 

<ul> 
    {{#listItems}} 
    <li>{{key}}</li> 
    {{/listItems}} 
</ul> 

jsbin

，或者使用方法：

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

是它這種方式可以使用Ractive嗎？

---

請注意，我不希望這樣的：

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

正如我已經有Ractive實例/組件，和我使用的MVP定義明確定義應用程序和視圖之間的接口。

Answer 1

在列表中的項目是ractive情況下，所以你必須調用get方法來訪問他們的數據，如果你想用他們的方式（見http://jsbin.com/nomutofati/1/edit?html,js,output）：

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