如何从每个绑定内部的 Oracle jet 下拉列表中唯一标识所选值

Question

1).我有三个名字 Bert,Charles,Denise.

及其可观察的索引（使用 current.observableIndex）。
0：伯特，1：查尔斯，2：丹妮丝
他们的当前状态显示在他们的名字前面（使用 current.data.status）

2).每个名字都有下拉和提交按钮。(使用 oj-bind-for-each)

3).我可以 select 下拉列表中的值并提交（它将捕获下拉列表中的 selected 值）

动作

初始页面浏览量

假设我 select编辑

0：Bert 和下拉值与 Firefox
1: Charles 和下拉值作为 Safari
2：Denise和下拉值一样Opera
然后我单击来自 0 的提交按钮：Bert

问题

提交按钮捕捉到 Opera，我 select 最后来自 2：Denise

预期

我想为 0: Bert 提交按钮点击获取 Firefox。

我怎样才能做到这一点？

代码

dashboard.html

      <div>    
      <oj-bind-for-each data="[[dataProvider]]">
          <template>
              <li>
              <oj-bind-text value="[[$current.data.status]]"></oj-bind-text>
              <oj-bind-text value="[[$current.observableIndex]]"></oj-bind-text> : <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
              <oj-button class='oj-button-sm' on-oj-action= "[[saveData]]">
                  Submit
              </oj-button>
              <oj-select-one id="[[uniquieId]]"
                             on-value-changed="[[selectedValue]]"  options="[[browsers]]" 
                             value="{{$current.data.status}}" style="max-width:20em">
              </oj-select-one>
              </li>

          </template>  
      </oj-bind-for-each>
  </div>

dashboard.js

define(['accUtils', 'knockout', 'ojs/ojarraydataprovider', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojselectcombobox'],
        function (accUtils, ko, ArrayDataProvider) {

            function DashboardViewModel() {
                var self = this;
                self.uniquieId = ko.observable();

                var users = ko.observableArray([
                    {id: "1", name: "Bert", status: "Internet Explorer"},
                    {id: "2", name: "Charles", status: "Chrome"},
                    {id: "3", name: "Denise", status: "Safari"}
                ]);
                self.dataProvider = new ArrayDataProvider(users, {keyAttributes: 'id'});
                self.selectVal = ko.observable('Chrome');
                self.selected = ko.observable();


                self.browsers = ko.observableArray([
                    {value: 'Internet Explorer', label: 'Internet Explorer'},
                    {value: 'Firefox', label: 'Firefox'},
                    {value: 'Chrome', label: 'Chrome'},
                    {value: 'Opera', label: 'Opera'},
                    {value: 'Safari', label: 'Safari'}
                ]);

                self.selectedValue = function (event, current) {

                    var optionValue = event.detail;
                    self.selected(optionValue.value);
                    console.log(self.selected());
                    console.log(optionValue);
                };

                self.saveData = function (event, current) {
                    self.uniquieId(current.observableIndex());
                    console.log(self.uniquieId());
                    console.log(self.selected());
                };

            }

            return DashboardViewModel;
        }
);

Answer 1

有 2 个问题需要修复：

在 oj-select-one 组件中，您将所选值绑定到 "{{$current.data.status}}"。但要使其正常工作，$current.data.status 必须能够更新其值，然后反映最新值。当您使 'status' 成为一个简单的字符串时，这是不可能的。

相反，它们应该是可观察的：

var users = ko.observableArray([
     {id: "1", name: "Bert", status: ko.observable("Internet Explorer")},
     {id: "2", name: "Charles", status: ko.observable("Chrome")}),
     {id: "3", name: "Denise", status: ko.observable("Safari")}
]);

换句话说，必须通过用户交互更新的 View 和 Viewmodel 之间的任何值都应该是可观察的。

没有使用 selected observable，因为 selectedValue 函数只是将 selected 更新为最后选择的任何内容。相反，您可以使用其他变量 uniquieId 来获取正确的数据，因为您的 saveData 函数会使用您刚刚单击“提交”的行的索引更新 uniquieId。

因此，将您的 saveData 函数更改为：

            self.saveData = function (event, current) {
                self.uniquieId(current.observableIndex());
                console.log(self.uniquieId());
                console.log(users()[self.uniquieId()].status());
            };

如何从每个绑定内部的 Oracle jet 下拉列表中唯一标识所选值

How to uniquely identify the selected value from drop down in Oracle jet which is inside for each bind

html

javascript

knockout.js

oracle-jet