gpt4 book ai didi

javascript - 如何在 oracle jet 中创建链接(动态?)选择字段?

转载 作者:行者123 更新时间:2023-11-30 15:20:01 25 4
gpt4 key购买 nike

我是 JS 和 OJET 的新手。我正在使用 oracle jet 创建一个表单。我需要创建两个选择字段,第一个显示客户的姓名,下一个必须更改的是所选客户团队成员的值。

我有一个格式如下的 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"
}
]
}

我设法用客户名称创建了一个选择字段:

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
});
});
});

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

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 返回的是一个函数,而不是当前选择的值。我将 console.log(self.clientsListVal) 添加到 View 模型以查看当前值。

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

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

我得到客户端“C01”的成员。

我尝试将 self.clientsListVal 更改为 $('#clients').val(),这是选择输入的 ID,我在控制台日志。

如何获取 View 模型中的选择字段字符串值?

最佳答案

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

因此您的测试变为 if (this.id === self.clientsListVal() ) {

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

由于您没有向我们展示值如何进入 clientsListVal,因此很难说出您需要做什么。它是否绑定(bind)到用户指定值的输入字段?它是从数据调用中填充的吗?无论哪种方式,您是否需要在 clientsListVal 中拥有多个 ID?如果您一次只需要持有一个 ID,请将 clientsListValobservableArray 更改为简单的 observable,您的测试将正常运行。

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

如果您不想更改为常规可观察对象,但希望数组只有一个元素,您可以像 clientsListVal()[0] 一样获取它——这是第 0 个(第一个)数组的元素。不过,请注意空数组。

关于javascript - 如何在 oracle jet 中创建链接(动态?)选择字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43875662/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com