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