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

【问题标题】：How can I add Ractive instances to a list? in a parent Ractive instance?如何将 Ractive 实例添加到列表中？在父 Ractive 实例中？
【发布时间】：2015-04-14 20:07:07
【问题描述】：

我已经有一个 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 来明确定义应用程序和视图之间的接口。

【问题讨论】：

标签： mvp ractivejs

【解决方案1】：

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

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

【讨论】：

这给了我一个想法。假设他们有模板，有没有办法渲染它们？我试过 {{this.render()}} 但它返回了一个承诺。
谢谢。我想知道是否只在 Ractive“子实例”中维护一个指向状态的指针就足够了。那么我就不需要像这样污染模板了。
您是否有理由预先实例化组件？通常你在父模板中使用组件标签并为你实例化它们。
> "我想知道是否只在 Ractive "子实例" 中维护一个指向状态的指针就足够了" - 所以你只是想共享数据？？？
@martypdx 好问题。我正在尝试使用详细的演示者，因此我不是在组合层中编写应用程序状态并将其作为大量 JSON 传递给顶级 Ractive 实例，而是试图在演示者处更明确地说明可以更新的可能数据级别，like this。为此，我需要维护一个指向列表中每个“子视图”的指针，并通过一个键 like this 对其进行更新。