Oracle JET：向复合组件传递异步属性的问题

我之前也碰到过类似的情况，核心问题在于复合组件没有正确监听传入的可观察数组的变化。以下是具体的解决步骤：

1. 确保复合组件ViewModel正确处理可观察参数 #

在你的add-training-modal组件ViewModel中，必须将传入的employees参数作为可观察对象持有，而不是普通变量。这样当父组件的data异步更新时，组件才能感知到变化：

define(['knockout'], function(ko) {
    function AddTrainingModalViewModel(params) {
        // 直接接收父组件的observableArray，或默认初始化空的可观察数组
        this.employees = params.employees || ko.observableArray([]);

        // 订阅数组变化，执行组件内的更新逻辑
        this.employees.subscribe(function(newEmployeeList) {
            // 这里可以处理数组更新后的操作：比如刷新UI组件、重新计算数据等
            console.log("员工列表已更新：", newEmployeeList);
            // 示例：如果组件内有下拉选项，在这里更新选项集合
            // this.selectOptions(newEmployeeList.map(emp => ({value: emp.id, label: emp.name})));
        }, this);
    }

    return AddTrainingModalViewModel;
});

2. 组件元数据声明可观察属性 #

在复合组件的component.json文件中，明确标记employees属性为可观察类型，让Oracle JET框架知道需要监听该属性的变化：

{
  "name": "add-training-modal",
  "version": "1.0.0",
  "properties": {
    "employees": {
      "type": "array",
      "observable": true
    }
  }
}

3. 视图层正确绑定到可观察数组 #

确保组件的HTML视图使用Oracle JET或Knockout的绑定语法，直接绑定到employees可观察数组。比如用foreach循环渲染列表：

<div class="employee-list" data-bind="foreach: employees">
    <div class="employee-item">
        <span data-bind="text: name"></span>
        <span data-bind="text: email"></span>
    </div>
</div>

如果使用Oracle JET的UI组件（比如oj-table），也要确保数据源绑定到可观察数组：

<oj-table id="emp-table"
          data="[[employees]]"
          columns='[{"headerText": "姓名", "field": "name"}, {"headerText": "邮箱", "field": "email"}]'>
</oj-table>

4. 避免初始化时仅执行一次逻辑 #

如果你的组件在初始化时需要基于employees做一些操作（比如初始化图表、配置下拉框），不要只在构造函数里执行一次，而是把这些逻辑放到subscribe回调中。因为构造函数执行时，父组件的异步请求还未完成，employees是空数组，只有订阅回调能捕获到后续的更新。

完成以上步骤后，当父组件的UserFactory.getUsers()异步请求完成并更新self.data时，复合组件的employees会自动同步，并且触发订阅回调中的逻辑，视图也会随之更新。

内容的提问来源于stack exchange，提问作者Maurice Wipf