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

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

2016-11-10 65 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

相關問題

 相關問題