1. 首页
  2. 问答
  3. 基因敲除令人耳目一新的控件

基因敲除令人耳目一新的控件

2016-11-10 58 views
0

我是KnockoutJS的新手。我有一个下拉式表单。当用户选择'当前'选项时，使用可见绑定使一个div可见，并且当选择'未来'时，使另一个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>

来源

2016-11-10 SilverFish

+0

请显示更多的代码片段。你的模型你做了什么 –

+0

我已经发布了一些示例代码来演示问题 – SilverFish

回答

0

你可以有你的主视图模型内部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的即时访问，因此您可以直接绑定一个计算观察到或订阅功能的this模型的范围内的值，可以从不同的模型和范围被调用。除此之外，您的模型的创建实际上被封装在一个调用中。这就是为什么我使用了很多人喜欢使用这种模式。

所以，你可以用MainViewModel一个新实例创建一个全局变量（利用this值），然后你就可以给该变量传递给你想在这里我们传递vm到任何插件knockout来应用绑定。

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

来源

2016-11-11 03:30:55

+0

马特，你给的解决方案在我的示例应用程序中效果很好。但真正的应用是使用一些插件/路由器，durandal /活页夹。因此，vm被声明在代码的底部而不是ko.applyBindings（new MainViewModel（））;例如：var vm = {SelectedRequestType：SelectedRequestType { }; return vm;所以我完全搞不清vm中应该发生什么，以及MainViewModel中应该发生什么。你可以请指导。 – SilverFish

+0

@SilverFish查看Edit部分。希望有帮助 –

+0

马特，我在同样的背景下有一个后续问题。我编辑了原文。如果你可以请帮助。 – SilverFish

相关问题

 相关问题