javascript - Knockout JS 中选定的下拉菜单 ID

Question

我有一个数组 doorsForSite，其中每个项目将有一个 Doors 数组，每个门将有一个 Schedules 数组。

看起来像:

            var scheduleList = new[] 
            {
                new { ScheduleId = "Schedule1",ScheduleName = "Always On" },
                new { ScheduleId = "Schedule2",ScheduleName = "Never On"}
            };

            var doorsForSite = new[]
                {
                new { ControllerId ="controller1",ControllerName="Eagle",IsChecked = "false",
                        Doors = new[]
                        {
                            new { DoorId="Door1",DoorName="DoorOne",Schedules = scheduleList},
                            new { DoorId = "Door2", DoorName = "DoorTwo",Schedules = scheduleList}
                        }

                    },
                new { ControllerId ="controller2",ControllerName="NetAxis",IsChecked = "false",
                        Doors = new[]
                        {
                            new { DoorId=  "Door3",DoorName="DoorThree",Schedules = scheduleList},
                            new { DoorId = "Door4", DoorName = "DoorFour",Schedules = scheduleList},
                            new { DoorId = "Door5", DoorName = "DoorFive",Schedules = scheduleList}
                        }

                    }
            };

现在在用户界面中..

<ul class="accgrouptableaccordian scroll-x scroll-y">
    <!-- ko foreach: $data.AddModel.ControllerDoors -->
    <li>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <span>
                            <span>
                                <span class="ispicon ispicon_accordian_droparrow">
                                </span>
                                <span class="title" style="line-height:20px;" data-bind="text: ControllerName() + ' - ' + Doors().length + ' Doors'">
                                </span>
                            </span>
                            <span>

                            </span>
                        </span>
                    </h4>
                </div>
                <div class="panel-collapse">
                    <div class="panel-body">
                        <div class="table-responsive panel-body">
                            <table class="table">
                                <tbody data-bind="foreach:Doors">
                                    <tr>
                                        <td>
                                            <div>
                                                <span data-bind="text:DoorId"></span>
                                            </div>
                                        </td>
                                        <td class="col-md-4">

                                            <select name="drpSchedulesAccess" class="form-control drpSchedulesAccess" data-bind="options:$data.Schedules,
                                                optionsText: 'ScheduleName',
                                                optionsValue: 'ScheduleId',
                                                value: $data.ScheduleId"></select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <!-- /ko -->
</ul>

但在 Viewmodel 中，我只想获取在下拉列表中选中的门的选定时间表的值。

但这并没有发生。

我做到了

            ko.utils.arrayForEach(this.AddModel.ControllerDoors(), function (item) {
                ko.utils.arrayForEach(item.Doors(), function (item) {
                    doorsSelected.push(item);
                });

            });
            var doors = ko.utils.arrayFilter(doorsSelected, function (item) {
                return item.IsChecked == true;
            });

            var doorIds = ko.utils.arrayMap(doors, function (door) {
                if (jQuery.inArray(door.DoorId, doorIds) == -1) {
                    return door.DoorId;
                }
            });

            ko.utils.arrayForEach(doors, function (item) {
                debugger;
                ko.utils.arrayForEach(item.Schedules, function (item) {

                    $('.drpSchedulesAccess option:selected').each(function (i) {
                        schedulesSelected.push($(this).val());
                    });
                });

            });

我检查了 3 个门，并从下拉列表中选择了 3 个时间表。

但是我得到的计划数组长度为 30。

为什么会这样呢？

Answer 1

您可能需要稍微调整一下您的代码，最重要的是，一切都以 knockout 的方式进行。

View 模型:

var ViewModel = function() {
  var self = this;
  self.ControllerDoors = ko.observableArray(ko.mapping.fromJS(doorsForSite)()); // mapping to convert everything to observable
  self.check = function() {
    var doorsSelected = [];
    ko.utils.arrayForEach(self.ControllerDoors(), function(item) {
      //you can add condition here based on controllerName IsChecked & reduce looping
      ko.utils.arrayForEach(item.Doors(), function(item) {
        if (item.IsChecked())
          doorsSelected.push(item);
      });
    });
    console.log(doorsSelected);
  }
};

观看工作演示 here 并检查控制台窗口以查找结果。

注意事项:

() :用于读取 observable(您可以在当前 View 中找到它的用法)