knockout js observable顯示未定義的值

Question

我在頁面中創建了以下代碼。我正在使用淘汰賽代碼。 如果你需要更多的細節，請讓我知道。

我的問題是從下面兩個下拉列表中的一個設置值到SelectedSeatBlockId而其他元素無法設置值。當我檢索的功能相同的價值處理，我可以retrore價值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

不知道是否對選擇有單擊事件是一個好主意。如果您只想獲得可觀察值的值，那麼您可以直接讀取可觀察值。

你的榜樣確保兩個觀測量設置，我想它看起來就像這樣：

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>