如何将 Ractive 实例添加到列表中？在父 Ractive 实例中？

Question

我已经有一个 Ractive instance (or 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 instances/components，并且我正在使用 MVP 来明确定义应用程序和视图之间的接口。

Answer 1

列表中的项目是活跃的实例，所以如果你想以这种方式使用它们，你必须调用 get 方法来访问它们的数据（参见 http://jsbin.com/nomutofati/1/edit?html,js,output）：

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

如何将 Ractive 实例添加到列表中？在父 Ractive 实例中？

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

mvp

ractivejs