javascript – Aurelia中的数据绑定父子关系

我有两节课：

export class Shipment {
    shipmentId: number;
    widget: Widget;

}

export class Widget {
    widgetId: number;
    name: string;
}

然后我有一个ShipmentUi视图模型,它有一个发货实例(this.shipment).

在ShipmentUi视图中,我构建了部分UI,显示了允许选择Widget的WidgetUi：


WigetUi的视图模型可以节省出货量.所以WidgetUi有一个this.shipment.
然后widgetUi的视图显示一个选择器：


这次我绑定到widget(而不是像我上面那样的this.shipment.widget).
然后用户使用select选择名为“Dull Widget”的小部件.该小部件的值为“B7”. ‘B7’是对名为’Dull Widget’的小部件的引用.
据我了解JavaScript,WidgetUi的this.widget现在的值为’B7′(这是对’Dull Widget’的引用). (这是通过Aurelia数据绑定系统完成的.)
但是ShipmentUi的this.shipment.widget仍然是’A3′(这是对’Sharp Widget’的引用).
当我将this.shipment.widget绑定到compose元素时,这不是我想要的.我希望小部件对象的更新能够反映在货件中. (注意,如果我刚刚更新了widget.name,那么它就会被更新.)
所以,从我所看到的,我必须将完整的父元素传递给compose元素(在本例中为this.shipment),如果我想要捕获一个赋值.
我希望我错了(或者有一个解决方法),因为传递父对象会让我分享“子”类不需要知道的细节. (即它打破了数据封装)
我想我可以在课程的每一层之间建立一个“持有者”.例如：this.shipment.holder.widget和holder将只包含其中的小部件.但这有点丑……我希望还有另一种方式……
所以,我的问题是：我对上述陈述是否正确？如果我是,还有另一种方法可以保持我的对象模型干净吗？


最佳答案
如果我正确理解了这个问题,那么您正在寻找一种与widgetui组件共享最小数据量的方法.而不是给它整个装运对象,以便它可以操作shipment.widget属性,而不是给它一个属性访问器到小部件属性.
好消息：这正是@bindable的目的.您需要做的就是停止使用compose并使用@bindable属性创建一个自定义元素,该属性表示自定义元素执行它所需的最小数据量.例如：
窗口小部件,picker.js

import {bindable,bindingMode} from 'aurelia-framework';

export class WidgetPicker {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) widget;
  @bindable widgets;
}

窗口小部件,picker.html