将对象传递给下一个兄弟组件

Question

我在 AureliaJS 中的组件结构是：

<parent>
  <child1> 
  <child2> 
</parent>

我在 child1 中有一个对象，我通过 ajax 请求获得该对象：

export class Child1 {   
  fechedObject = {}: 
}

我需要这个属性在第二个组件中具有双向绑定和可观察性

export class Child2 {   
  // I need this fechedObject here 
}

获取它的最佳方法是什么？

Answer 1

您可以获得 <child1/> 视图模型参考并将其绑定到 <child2/>:

<child1 view-model.ref='child1'></child1>

<child2 data.bind='child1.fetchedObject'></child2>

所以child.data只需要是可绑定的：

export class Child2 {

  @bindable
  data
}

Answer 2

我认为这里最好的方法是在两个子模型上使用双向绑定，通过父模型中的双向绑定来绑定模型。

在你的 parent.html 中，你需要这个：

<child1 fetched-object.two-way="fetchedObject"></child1>

<child2 fetched-object.two-way="fetchedObject"></child2>

并且在两个子视图模型中，您将变量声明为 bindable:

bindable()
public fechedObject;

这样，任何一个子项中发生的任何编辑都将传递给另一个子项。如果您想防止 child2 中的编辑影响 child1 中的对象，您可以简单地使用 child2 上的 fechedObject.one-way 或 fechedObject.bind 进行单向绑定。

Passing objects to next sibling components