ノックアウトjs observableが未定義の値を示しています

Question

私のページに次のコードを作成しました。私はノックアウトコードを使用しています。 詳細が必要な場合はお知らせください。

私の質問は下の2つのドロップダウンから1つは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

ない選択にクリックイベントを持つことは良い考えであれば確認してください。観測値の値を取得するだけの場合は、観測値を直接読み取ることができます。

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>