敲除jsobservable显示未定义的值

knockout js observable is showing undefined value

本文关键字：未定义 显示 jsobservable 敲除      更新时间：2023-09-26

我在页面中创建了以下代码。我正在使用淘汰码。如果你需要更多的细节，请告诉我。

我的问题是从下面两个下拉列表中，一个是将值设置为SelectedSeatBlockId，而另一个元素无法设置值。当我在要处理的函数中检索相同的值时，我能够检索self.SelectedSeatBlockId() 的值

请帮帮我。我知道我提供的代码很少。如果你需要更多细节，请告诉我。

.js文件代码

    self.SeatBlockTitleList = ko.observableArray();
    self.SelectedSeatBlockId = ko.observable();
    self.SeatRowTitleList = ko.observableArray();
    self.SelectedSeatRowId = ko.observable();

.html文件代码

<select class="form-control input-sm" id="" size="1" data-bind="event:{click: SeatPlanModel.GetSeatRowDropDown()}, options:  SeatPlanModel.SeatBlockTitleList ,optionsValue:'Value',optionsText:'Text', value:  SeatPlanModel.SelectedSeatBlockId, optionsCaption: 'Choose Seat Block Title...'"></select>
<select class="form-control input-sm" id="" size="1" data-bind="event:{click: SeatPlanModel.GetSeatRecords()},options:  SeatPlanModel.SeatRowTitleList, optionsValue:'Value',optionsText:'Text', value:  SeatPlanModel.SelectedSeatRowId, optionsCaption: 'Choose Seat Block Title...'"></select>

不确定在select上设置click事件是否是个好主意。如果你只想得到可观测值，那么你可以直接读取可观测值。

在你的例子中，确保两个可观察性都设置好了，我想它看起来是这样的：

var DemoPage = (function() {
  function DemoPage() {
    var self = this;
    self.SeatBlockTitleList = ko.observableArray([{
      Value: 1,
      Text: 'One'
    }, {
      Value: 2,
      Text: 'Two'
    }, {
      Value: 3,
      Text: 'Three'
    }]);
    self.SelectedSeatBlockId = ko.observable('');
    self.SeatRowTitleList = ko.observableArray([{
      Value: 'R1',
      Text: 'Row One'
    }, {
      Value: 'R2',
      Text: 'Row Two'
    }, {
      Value: 'R3',
      Text: 'Row Three'
    }]);
    self.SelectedSeatRowId = ko.observable('');
    self.GetSeatRowDropDown = function() {
      console.log(self.SelectedSeatBlockId());
    };
    self.GetSeatRecords = function() {
      console.log(self.SelectedSeatRowId())
    };
  }
  return DemoPage;
})();
var demo = new DemoPage();
ko.applyBindings(demo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select class="form-control input-sm" id="" size="1" data-bind="event:{click: GetSeatRowDropDown()}, options:  SeatBlockTitleList ,optionsValue:'Value',optionsText:'Text', value:  SelectedSeatBlockId, optionsCaption: 'Choose Seat Block Title...'"></select>
<select class="form-control input-sm" id="" size="1" data-bind="event:{click: GetSeatRecords()},options:  SeatRowTitleList, optionsValue:'Value',optionsText:'Text', value:  SelectedSeatRowId, optionsCaption: 'Choose Seat Block Title...'"></select>
<p>SelectedSeatBlockId: <span data-bind="text: SelectedSeatBlockId"></span>
</p>
<p>SelectedSeatRowId: <span data-bind="text: SelectedSeatRowId"></span>
</p>

但如果没有点击事件，它也可以工作：

var DemoPage = (function() {
  function DemoPage() {
    var self = this;
    self.SeatBlockTitleList = ko.observableArray([{
      Value: 1,
      Text: 'One'
    }, {
      Value: 2,
      Text: 'Two'
    }, {
      Value: 3,
      Text: 'Three'
    }]);
    self.SelectedSeatBlockId = ko.observable('');
    self.SeatRowTitleList = ko.observableArray([{
      Value: 'R1',
      Text: 'Row One'
    }, {
      Value: 'R2',
      Text: 'Row Two'
    }, {
      Value: 'R3',
      Text: 'Row Three'
    }]);
    self.SelectedSeatRowId = ko.observable('');
  }
  return DemoPage;
})();
var demo = new DemoPage();
ko.applyBindings(demo);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select class="form-control input-sm" id="" size="1" data-bind="options:  SeatBlockTitleList ,optionsValue:'Value',optionsText:'Text', value:  SelectedSeatBlockId, optionsCaption: 'Choose Seat Block Title...'"></select>
<select class="form-control input-sm" id="" size="1" data-bind="options:  SeatRowTitleList, optionsValue:'Value',optionsText:'Text', value:  SelectedSeatRowId, optionsCaption: 'Choose Seat Block Title...'"></select>
<p>SelectedSeatBlockId: <span data-bind="text: SelectedSeatBlockId"></span>
</p>
<p>SelectedSeatRowId: <span data-bind="text: SelectedSeatRowId"></span>
</p>

相关文章：