0
我具有由具有值的「當前」和「將來」的下拉形式。當用戶選擇其中一個選項時，可以使用敲除可視綁定使訂單可見，並訂閱下拉選擇。這部分工作正常。 現在視圖我們使可見，當chkGroup（複選框）的選擇中，我需要可見另一個DIV即數據綁定=「可見：showchkGroupSelected」。所以我使用類似的代碼來訂閱該複選框點擊。但顯然這不起作用。請指教。 HTML代碼：KnockoutJS可見結合嵌套
<div class="row row-content">
<div class="col-xs-12">
<h4>Select Planning</h4>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="requestType" class="col-sm-4 control-label">Planning Type</label>
<div class="col-sm-8">
<select style="width:350px" class="input-md" data-bind="options: DayRequests, value: SelectedRequestType, optionsCaption: 'Select current/future'"></select>
</div>
</div>
</form>
</div>
</div>
<!--Current -->
<div class="container-fluid" data-bind="visible: ShowCurrent">
<!-- ko with: CurrentVM -->
<h4>Current Day Request</h4>
<div class="row row-content">
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkTownHall">Townhall(s)</label>
</div>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkSales">Sales Meeting</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkGroups">Groups</label>
</div>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkConference">Conference</label>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- /ko -->
</div>
<!--future-->
<div class="container-fluid" data-bind="visible: ShowFuture">
<!-- ko with: FutureVM -->
<h4>Future Day Request</h4>
<div class="row row-content">
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkTownHallF">Townhall(s)</label>
</div>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkSalesF">Sales Meeting</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkGroupsF">Groups</label>
</div>
</div>
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox" data-bind="checked:chkConferenceF">Conference</label>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- /ko -->
</div>
<!--Group Selected -->
<div class="row row-content" data-bind="visible: showchkGroupSelected">
<div class="col-xs-12">
<h4>Group Details</h4>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="trainingName" class="col-sm-2 control-label">Name of Training</label>
<div class="col-sm-4">
<input type="text" class="form-control" data-bind="value:GroupName">
</div>
<label for="CrossFunc" class="col-sm-2 control-label">Group has functions?</label>
<div class="col-sm-4">
<label class="form-check-inline">
<input class="form-check-input" type="radio" data-bind="checked:optFunction" id="optFunctionYes" value="1"> Yes
<input class="form-check-input" type="radio" data-bind="checked:optFunction" id="optFunctionNo" value="0"> No
</label>
</div>
</div>
</form>
</div>
</div>
這裏是腳本：
<script>
var MainViewModel = function() {
var self = this;
self.DayRequests = ko.observableArray(['Current', 'Future']);
self.ShowCurrent = ko.observable(false);
self.ShowFuture = ko.observable(false);
self.FutureVM = ko.observable();
self.CurrentVM = ko.observable();
self.SelectedRequestType = ko.observable();
self.SelectedRequestType.subscribe(function (requestTypeVal) {
if (requestTypeVal == 'Current') {
self.ShowCurrent(true);
self.ShowFuture(false);
self.CurrentVM(new planViewModel());
}
else if (requestTypeVal == 'Future') {
self.FutureVM(new planViewModel());
self.ShowFuture(true);
self.ShowCurrent(false);
}
});
//can't figure out the following piece////////
self.GroupVM = ko.observable();
self.showchkGroupSelected = ko.observable(false);
self.chkGroups.subscribe(function (value) {
if (value == true)
{
self.showchkGroupSelected(true);
self.GroupVM(new CurrGroupVM());
}
else {
self.showchkGroupSelected(false);
}
});
}
var CurrGroupVM = function() {
var self = this;
self.optFunction = ko.observable(false);
self.GroupName = ko.observable(false);
}
//////////////////
var planViewModel = function() {
var self = this;
self.chkTownHall = ko.observable(false);
self.chkSales = ko.observable(false);
self.chkGroups = ko.observable(false);
self.chkConference = ko.observable(false);
self.chkTownHallF = ko.observable(false);
self.chkConferenceF = ko.observable(false);
self.chkGroupsF = ko.observable(false);
self.chkSalesF = ko.observable(false);
};
ko.applyBindings(new MainViewModel());
</script>
我看不到'chkGroups'定義爲可觀察到的內部'您正在訂閱的MainViewModel。請看看在瀏覽器上的控制檯日誌的工具，看看你得到任何erorrs –
遺漏的類型錯誤：無法讀取屬性未定義「訂閱」。我定義chkGroups內planViewModel – SilverFish
如果我把chkGroups的MainViewModel裏面，然後我得到錯誤信息：chkGroups沒有定義和組名沒有被定義 – SilverFish