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>