我对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 im使用:
<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)添加到视图模型以查看当前值。
如果我将self.clientsListVal更改为字符串:
if(this.id === 'C01'){}
我得到了客户“ C01”的成员。
我尝试将self.clientsListVal更改为$('#clients')。val(),这是选择输入的ID,并且在console.log中未定义。
如何在ViewModel中获取选择字段字符串值?
最佳答案
在淘汰赛中,可观察对象就是函数-因此,当您直接要求可观察对象(如self.clientsListVal
)时,就会获得函数定义。要获取基础值,请像函数一样调用observable:self.clientsListVal()
。
因此您的测试变为if (this.id === self.clientsListVal() ) {
现在您还有另一个问题-可观察对象包含一个数组,而不是一个ID。数组中可能只有一个ID元素,但是您必须深入数组才能获取它。
由于您没有向我们展示值如何进入clientsListVal
,因此很难说出您需要做什么。它是否绑定到用户指定值的输入字段?它是通过数据通话填充的吗?无论哪种方式,您是否都需要在clientsListVal
中使用多个ID?如果您一次只需要保留一个ID,请将clientsListVal
从observableArray
更改为简单的observable
,您的测试将起作用。
如果clientsListVal
可以容纳多个值,则需要在它们上循环。有多种方法可以做到这一点。您可以通过将observableArray的值分配给变量var clients = clientsListVal()
来获取基础数组。 clients
现在保存数组,您可以使用jQuery的$.each
,本机Array.each
或其他方法来循环或映射数组。或者您可以使用淘汰赛的built-in array utilities,例如arrayForEach
如果您不想更改为常规可观察对象,但希望数组只有一个元素,则可以像clientsListVal()[0]
那样进行处理-这是数组的第0个(第一个)元素。小心空数组。
关于javascript - 如何在Oracle Jet中使linked(dynamic?)选择字段?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43875662/