2014-02-13 15 views
5
data-bind="style : { display : repeat() === 'Custom' ? 'block' : 'none' }" 

這種風格綁定成功利用基因敲除其中如下面的失敗可見樣式結合使用knockout.js失敗

data-bind="style : { visibility : repeat() === 'Custom' ? 'visible' : 'hidden' }" 

爲什麼?

我可以使用可見的綁定,但在我的情況下,即使它隱藏,我也不想丟失該div空間。

我該如何做到這一點?

我不想讓這種情況發生,使用jQuery,因爲我已經成功地使用它。

+2

使用可見性與樣式綁定應該很好。在這個例子中也可以參考:http://jsfiddle.net/SUaB4/。所以請創建一個jsfiddle來演示你的問題! – nemesv

+0

@nemesv打敗了我,但我會張貼我的小提琴無論如何顯示它的作品:http://jsfiddle.net/9bgM2/必須是其他東西在你的CSS或淘汰賽,導致它失敗 – Tanner

回答

11

另一個選項來解決這個問題是要創建自己的綁定。這聽起來很難,但它非常簡單,KO的設計考慮了自定義綁定。我希望基本軟件包有更多,但它們很容易創建。這種解決方案的優點是您的綁定更簡單,更清晰。下面是一個例子,稱爲隱:

ko.bindingHandlers.hidden = (function() { 
    function setVisibility(element, valueAccessor) { 
     var hidden = ko.unwrap(valueAccessor()); 
     $(element).css('visibility', hidden ? 'hidden' : 'visible'); 
    } 
    return { init: setVisibility, update: setVisibility }; 
})(); 

而在你的HTML作爲:

data-bind="hidden: !repeat()" 
1

可能會更好地使用css綁定http://knockoutjs.com/documentation/css-binding.html。你也可以整理一下computed

self.hidden = ko.computed(function() { 
    return self.repeat() !== 'Custom'; 
}) 

你結合現在這個簡單的data-bind="css: { hide: hidden }"

在你的CSS提供了以下類:

.hide { 
    visibility: 'hidden'; 
} 
4

我只是做了一些非常相似,這爲我工作:

data-bind="style : { visibility : repeat() === 'Custom' ? '' : 'hidden' }" 

的區別將visibility設置爲''而不是visible