KnockoutJS +高級複選框功能

該複選框的先進性在於，它不僅基於現有數據進行設置，而且頁面還必須以多種方式響應用戶通過手動檢查或取消選中來更改複選框。KnockoutJS +高級複選框功能

想象一下，你有一個murderCaseModel與各種Witnesses列表犯罪。

這裏是一個搗鼓你：

http://jsfiddle.net/maxgrr/j6fm7162/6/

的要求如下：

已經完成

如果以前witnesses從加載的數據存在，設置第l頁上的框的checked狀態OAD
```
<input type='checkbox' data-bind='checked: numWitnesses() > 0'></input> 
```
刪除Witness
添加Witness

TODO

切換的複選框會導致頁面上的其他區域出現或消失

如果它被用戶切換爲「否」（未選中），我們使見證顯示區域INVISIBLE（理想情況下，從DOM中移除）並刪除所有對象。
如果它被切換到'是'（勾選），我們使見證顯示區域可見，並確保至少有一個對象可以由用戶填寫。

這整個問題對我來說非常棘手，並且確定了複選框的自動值，而且用戶選擇的值也很難掌握。任何幫助深表感謝。這是一個很酷的功能！

來源

2015-05-09 Marcel

可以使用computed，使您的wereThereAnyWitnesses外地一點小聰明：

self.wereThereAnyWitnesses = ko.computed({ 
    read: function() { 
     return self.numWitnesses() > 0; 
    }, 
    write: function(wereThereAnyWitnesses) { 
     if (!wereThereAnyWitnesses && self.numWitnesses() > 0) { 
      if (!confirm("Remove all current witnesses?")) 
       return self.wereThereAnyWitnesses.notifySubscribers(); 
      else 
       self.witnesses.removeAll(); 
     } 

     if (wereThereAnyWitnesses && self.numWitnesses() == 0) 
      self.addWitness(); 
     } 
}, this);

而在你的HTML：

<input type='checkbox' data-bind='checked: wereThereAnyWitnesses' />

見Fiddle

來源

2015-05-09 22:30:11 haim770

不可思議！你已經超越了。謝謝，真誠。我唯一不能從你的解決方案中理解的部分是爲什麼你在'（function（）{}）（）;'代碼中包裝'wereThereAnyWitnesses'計算值，'intitialValue'和'value'。 – Marcel

我用了一個IIFE（http://benalman.com/news/2010/11/immediately-invoked-function-expression/）爲'computed'創建一些私人「後臺」。由於「計算」本身僅公開讀/寫接口，因此我需要某處存儲實際值，這就是「值」變量。但是，我不希望這個變量在'computed'範圍之外是可用的，因爲它只需要'computed'來訪問（和修改）。爲了達到這個目標，IIFE是最終的（和通用的）解決方案。 – haim770

你是一個親！感謝您的資源。不過，我注意到有關解決方案的一點是，如果用戶取消選中該框並按下「添加見證」，則該複選框不會對此作出響應。你知道我們將如何完成響應的圈子嗎？ – Marcel

您可以使用jQuery。首先，確保你已經在你的head標籤中包含了jQuery庫。只需將以下代碼複製在你的腦袋標籤：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然後，使用下面的代碼，看是否複選框被選中：

<script type="text/javascript"> 
if ($('#the_checkbox').is(":checked")) 
{ 
    $('#the_textarea').hide(); 
} 
</script>

這裏是輸入：

<input type="checkbox" id="the_checkbox" />

來源

2015-05-09 22:42:08 Arshia

KnockoutJS +高級複選框功能

回答

相關問題