如何在 oracle jet 中创建链接（动态？）select 字段？

Question

我对 JS 和 OJET 很陌生。我正在使用 oracle jet 创建一个表单。我需要创建两个 select 字段，第一个显示客户的姓名，下一个必须更改的是 selected 客户团队成员的值。

我有一个 JSON 格式的文件：

{
"clients": [
    {
        "id": "C01",
        "name": "Client 1",
        "manager": "Manager 1",
        "team": [
            {
               "id": "C1MEM1",
               "name": "member 1"
            },
            {
                "id": "C1MEM2",
                "name": "member 2"
            },
            {
                "id": "C1MEM3",
                "name": "member 3"
            },
            {
                "id": "C1MEM4",
                "name": "Member 4"
            }
        ]
    },
    {
        "id": "C02",
        "name": "Client 2",
        "manager": "Manager 2",
        "team": [
            {
               "id": "C2MEM1",
               "name": "member 1"
            },
            {
                "id": "C2MEM2",
                "name": "member 2"
            },
            {
                "id": "C2MEM3",
                "name": "member 3"
            },
            {
                "id": "C2MEM4",
                "name": "member 4"
            }
        ]
    }

我设法用客户名称创建了一个 select 字段：

self.clientsListVal = ko.observableArray(['C01']);
  self.clientsList = ko.observableArray();
  $.getJSON("http://localhost:8000/js/json/clients.json").
    then(function(data){
      $.each(data["clients"],function(){
        self.clientsList.push({
          value: this.id,
          label: this.name
        });
      });
    });

然后我尝试通过这种方式获取下一个 select 字段，但它不起作用:( :

self.memberList = ko.observableArray();

$.getJSON("http://localhost:8000/js/json/clients.json").
then(function(data){
    $.each(data["clients"],function(){
        if (this.id === self.clientsListVal ) {
            $.each(this["team"], function(){
                self.memberList.push({
                    value: this.id,
                    label: this.name
                });
            });
        }
    });
});

这是 HTML 我正在使用：

    <div class="oj-applayout-content">
<div role="main" class="oj-hybrid-applayout-content">
  <div class="oj-hybrid-padding">
    <h3>Dashboard Content Area</h3>
    <div>
        <label for="clients">Clients</label>
        <select id="clients"
        data-bind="ojComponent:
        {component: 'ojSelect',
        options: clientsList,
        value: clientsListVal,
        rootAttributes: {style:'max-width:20em'}}">
        </select>


        <label for="select-value">Current selected value is</label>
        <span id="select-value" data-bind="text: clientsListVal"></span>

        <label for="members">Members</label>
        <select id="members"
        data-bind="ojComponent: {component: 'ojSelect',
        options: memberList,
        value: memberListVal,
        rootAttributes: {style:'max-width:20em'}}">
        </select>
    </div>
  </div>
</div>

有什么帮助或提示吗？谢谢！

编辑：我认为问题在于 self.clientsListVal 返回的函数不是当前的 selected 值。我将 console.log(self.clientsListVal) 添加到视图模型以查看当前值。

如果我将 self.clientsListVal 更改为字符串：

if(this.id === 'C01'){}

我得到了客户端的成员"C01"。

我试过把self.clientsListVal改成$('#clients').val()，这是id select 输入的，我在 console.log.

中得到 undefined

如何获取视图模型中的 select 字段字符串值？

Answer 1

在 Knockout 中，可观察对象是函数——因此当您直接请求可观察对象时，例如 self.clientsListVal，您会得到函数定义。要获取基础值，请像调用函数一样调用可观察对象：self.clientsListVal().

所以你的测试变成if (this.id === self.clientsListVal() ) {

现在您遇到了另一个问题 -- observable 包含一个数组，而不是一个 ID。该数组中可能只有一个 ID 元素，但您必须进入数组才能获取它。

由于您没有向我们展示一个值如何进入 clientsListVal，所以很难说您需要做什么。它是否绑定到用户指定值的输入字段？它是从数据调用中填充的吗？无论哪种方式，您是否需要在 clientsListVal 中拥有多个 ID？如果您一次只需要持有一个 ID，请将 clientsListVal 从 observableArray 更改为简单的 observable，您的测试将成功。

如果clientsListVal 可以保存多个值，您将需要遍历它们。有多种方法可以做到这一点。您可以通过将 observableArray 的值分配给变量来获取底层数组：var clients = clientsListVal()。 clients 现在保存数组，您可以使用 jQuery 的 $.each、原生的 Array.each 或一些其他方式循环或映射数组。或者你可以使用 Knockout 的 built-in array utilities，比如 arrayForEach

如果您不想更改为常规可观察对象，但希望数组只有一个元素，您可以像 clientsListVal()[0] 那样处理它——这是数组的第 0 个（第一个）元素大批。注意空数组，

如何在 oracle jet 中创建链接（动态？）select 字段？

How to make linked(dynamic?) select fields in oracle jet?

javascript

jquery

knockout.js

oracle-jet