在knockoutJS中刷新控制

Question

我是KnockoutJS的新手。我有一个带下拉列表的表单。当用户选择＆＃39;当前＆＃39;选项一div使用可见的绑定可见，并且当＆＃39; Future＆＃39;选中另一个div可见。但是，控件在视图之间切换时会保留其值。请指导。这是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:  $root.DayRequests, value: selectedRequestType,  optionsCaption: 'Select current / future'"></select>
                </div>
            </div>
        </form>
    </div>
</div>
<!--Current day request-->
<div class="container-fluid" data-bind="visible: showCurrent">
    <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>

</div>
<!--future Day Request-->
<div class="container-fluid" data-bind="visible: showfuture">
    <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>

</div>

这里是脚本

    <script>
    var myViewModel = {
        DayRequests: ko.observableArray(['Current', 'Future']),
        selectedRequestType: ko.observable(),
        showCurrent: ko.observable(false),
        showfuture: ko.observable(false),
        chkTownHall: ko.observable(false),
        chkSales: ko.observable(false),
        chkGroups: ko.observable(false),
        chkConference: ko.observable(false),
        chkTownHallF: ko.observable(false),
        chkConferenceF: ko.observable(false),
        chkGroupsF: ko.observable(false),
        chkSalesF: ko.observable(false)
    };
    myViewModel.selectedRequestType.subscribe(function (requestTypeVal) {
        if (requestTypeVal == 'Current') {
            myViewModel.showCurrent(true);
            myViewModel.showfuture(false);

        }
        else if (requestTypeVal == 'Future') {
            myViewModel.showCurrent(false);
            myViewModel.showfuture(true);
        }
    });
    ko.applyBindings(myViewModel);
</script>

Answer 1

您可以在主视图模型中拥有currentVM和FutureVM的实例。然后，每次在选项之间切换时，都会创建PlanViewModel（子模型）的新实例。

示例：https://jsfiddle.net/9aLvd3uw/253/

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

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

JS：

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.CurrentVM(new PlanViewModel ());
            self.ShowCurrent(true);
            self.ShowFuture(false);
        }
        else if (requestTypeVal == 'Future') {
            self.FutureVM(new PlanViewModel ());
                self.ShowFuture(true);
                self.ShowCurrent(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);
    };

   var vm = new MainViewModel();
   ko.applyBindings(vm);

修改 使用函数优于对象文字（如何定义模型）来定义视图模型有一些优点。

• 您可以立即访问this，因此您可以直接将计算的observable或subscribe函数绑定到模型范围内的this值，并可以从不同的方法调用型号和范围。此外，模型的创建实际上被封装在一个调用中。这就是我使用的原因，很多人都喜欢使用这种模式。

因此，您可以使用MainViewModel的新实例创建一个全局变量（利用this的值），然后您就可以将该变量传递给您想要的任何插件我们正在将vm传递给knockout以应用绑定。

var vm = new MainViewModel();
ko.applyBindings(vm);