Question

我在页面中创建了以下代码。我正在使用淘汰赛代码。如果您需要更多详细信息，请告诉我们。

我的问题是从下面的两个下拉列表中将值设置为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>

Answer 1

不确定选择点击事件是否是个好主意。如果你只想获得observable的值，那么你可以直接读取observable。

使用您的示例确保两个observable都已设置，我想它看起来像这样：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

但它也可以在没有点击事件的情况下工作：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

knockout js observable显示未定义的值

1 个答案: