Question

我有一个带有下拉列表的表单，其值为'Current'和'Future'。当用户选择任一选项时，使用挖空可见绑定和订阅下拉选择使div可见。这部分工作正常。现在在我们看到的那个视图中，在选择chkGroup（复选框）时，我需要使另一个div可见，即data-bind =“visible：showchkGroupSelected”。所以我使用类似的代码订阅该复选框点击。但显然它不起作用。请指教。 HTML代码：

    <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>

Answer 1

GroupName＆amp; optFunction是CurrGroupVM的一部分。您需要将GroupVM包装为

<!-- ko with: GroupVM-->
    ....HTML elements....
<!-- /ko -->

或内联绑定：

<form class="form-horizontal" role="form" data-bind="with:GroupVM">`
    ....HTML elements....
 </form>

视图：

.....

  <div class="col-xs-12 col-sm-9">
      <!-- ko with: GroupVM -->
        <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>
       <!-- /ko -->
    </div>

KnockoutJS可见绑定嵌套

1 个答案: