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。它的唯一功能是允许选择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元素更改窗口小部件：

<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）。

然后，用户使用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只会包含小部件。但这有点难看......我希望还有另一种方式......

所以，我的问题是：我对上述陈述是否正确？ 如果我是，还有另一种方法可以保持我的对象模型清洁吗？

Answer 1

如果我正确理解了这个问题，那么您正在寻找一种与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

<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

Aurelia中的数据绑定父子关系

代码：

问题设置：

问题：

重新询问（澄清）：

1 个答案: