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>

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

1 个答案: