Aurelia中的数据绑定父子关系

Question

代码:

我有两节课:

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

}

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

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

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

<compose view-model="src/views/widgetUi" model.bind="shipment"></compose>

WigetUi的视图模型可以节省出货量.所以WidgetUi有一个this.shipment.

然后widgetUi的视图显示一个选择器:

<select value.bind="shipment.widget" >
    <option class="dropdown-toggle" repeat.for="widget of widgets"
            model.two-way="widget">${widget.name}</option>
</select>

问题设置:

在我的撰写标签中(在ShipmentUi的视图中),我宁愿绑定到shipment.widget.

这将使WidgetUi的视图模型只获得一个this.widget.(该WidgetUi课程不需要查看或了解shipment它.它的唯一功能是允许选择a Widget.它不需要关心它是用于装运还是用于其他东西.)

但是,正如我理解Javascript,这是行不通的.

因为如果我只是传递对shipment.widget的引用,那么WidgetUi将只有对widget部分的引用.起初WidgetUi this.widget将与ShipmentUi具有相同的参考this.shipment.widget.

但是当用户选择不同的小部件时,WidgetUi this.widget将获得不同的引用(对于下拉列表中新选择的小部件).但ShipmentUi的this.shipment.widget遗嘱仍将引用原始小部件.

问题:

在Javascript中绑定到子对象时,如果要了解子对象的交换,是否总是必须传入包含对象？

这个问题的原因是我的测试不是100%确定的.所以我希望有人能为我清理它.

我也希望我错了,因为我真的不喜欢必须公开包含类中的所有数据.(在这种情况下,可以shipment在WigetUi课堂上访问.)

---

重新询问(澄清):

Fabio Luz要求澄清我的要求.所以这是一次尝试.这将介绍上面的示例,但将其更改为我希望它工作的方式.

我有两个小部件.Sharp Widget和Dull Widget.

ShipmentUi.js:
这个类有变量this.shipment.widget.我要说它的值是'A3'(任意内存值)."A3"是对名称为"Sharp Widget"的小部件的引用.

然后我将小部件传递给WidgetUi类:

<compose view-model="src/views/widgetUi" model.bind="shipment.wiget"></compose>

WidgetUi.js:
WidgetUi类具有:

activate(widget: Widget) {
   this.widget = widget;
}

所以现在WidgetUi this.widget的值也是'A3'.该值是对Widget的内存引用,其名称为"Sharp Widget".

现在用户使用此select元素来更改Widget:

<select value.bind="widget" >
    <option class="dropdown-toggle" repeat.for="widget of widgets"
            model.two-way="widget">${widget.name}</option>
</select>

这一次我绑定widget(而不是this.shipment.widget像我上面那样).

然后,用户使用,选择名为"Dull Widget"的小部件select.该小部件的值为"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只有小部件.但这有点丑......我希望还有另一种方式......

所以,我的问题是:我对上述陈述是否正确？ 如果我是,还有另一种方法可以保持我的对象模型干净吗？

Answer 1

如果我正确理解这个问题，您正在寻找一种与 widgetui 组件共享最少量数据的方法。您宁愿给它一个小部件属性的shipment.widget属性访问器，而不是给它整个装运对象以便它可以操作属性。

好消息：这正是@bindable设计的目的。您需要做的就是停止使用组合并制作一个自定义元素，其@bindable属性代表自定义元素完成其工作所需的最小数据量。例如：

widget-picker.js

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

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

widget-picker.html

<select value.bind="widget">
  <option repeat.for="widget of widgets" model.bind="widget">${widget.name}</option>
</select>

用法：

<widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>

例子：

https://gist.run/?id=4c726da335aaecefd80b