使用truthy/falsey條件可見的淘汰賽

我試圖使用knockout 2.2在div上做一個簡單的data-bind="visible..."。使用truthy/falsey條件可見的淘汰賽

<div id="test" style="display:none">this is visible</div> 
<div data-bind="visible: $('#test').is(':visible')">show if test is visible</div>

原樣，「測試」設置爲display:none，但第二個div仍顯示出來。爲什麼？這可以做到嗎？注意：我已經包含了所有腳本參考文獻，編號爲jQuery和knockout 2.2。

演示在這裏：http://jsbin.com/uviwiz/1/edit

注：我沒有做一個ko.applyBindings電話或類似的東西。也許我需要在聲明一個可觀察的函數之後？

來源

2013-03-26 Ian Davis

你要打電話applyBindings，否則淘汰賽將不會運行。 – 2013-03-26 14:55:28

另外，$（「＃test」）。is（「：visible」）不是ko.observable，因此當'test'div顯示/隱藏時它不會動態切換。它只會在頁面的第一次加載時起作用。 – 2013-03-26 15:02:02

第一個和第二個div之間沒有依賴關係。因此，如果第一個div更改它不會將其更改應用於第二個。

你可以試試這個：

var ViewModel = function() 
{ 
    var self = this; 

    self.boolean = ko.observable(true); 

}; 
var vm = new ViewModel(); 

ko.applyBindings(vm); 



setTimeout(function(){ 
    vm.boolean(false); 
}, 2000); 


<!DOCTYPE html> 
<html> 
<head> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div id="test" data-bind="visible:boolean">this is visible</div> 
    <div data-bind="visible:boolean">only show if above div is visible or not</div> 
    <div id="debug"></div> 

</body> 
</html>

來源

2013-03-26 15:14:33 Damien

我怎麼能讓self.boolean接受一個參數？所以我可以通過'ko.computable（function（val）{return val === 3;}）'來實現'data-bind =「visible：boolean（3）」'（只要你傳入3 ，否則爲假） – 2013-03-26 18:04:07

你可以這樣做[鏈接]（http://jsfiddle.net/damienobringer/WKEen/）。 – Damien 2013-03-26 18:34:23

完美（您發送的鏈接）。謝謝謝謝。 – 2013-03-26 18:39:22

使用truthy/falsey條件可見的淘汰賽

回答

相關問題