关于javascript：如何从每个绑定内部的Oracle jet下拉菜单中唯一标识所选值


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

1)。我有三个名字Bert，Charles，Denise。

  • 以及它们的可观察索引(使用current.observableIndex)。
  • 0：伯特，1：查尔斯，2：丹妮丝
  • 其当前状态显示在其名称的前面(使用current.data.status)

2)。每个名称都有一个下拉菜单并提交按钮。(用于每一个的oj-bind-for-each)

3)。我可以从下拉列表中选择值并提交(它将从下拉列表中捕获所选值)

动作

  • 初始页面浏览量

    enter

    我该如何实现？

    代码

    dashboard.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
          <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>

    dashboard.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    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;
            }
    );
    相关讨论

    有2个要修复的问题：

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

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

    1
    2
    3
    4
    5
    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可观察对象，因为selectedValue函数只是将selected更新为最后选择的内容。相反，您可以使用其他变量uniquieId来获取正确的数据，因为您的saveData函数将使用刚刚单击"提交"的行的索引来更新uniquieId。

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

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

    相关讨论