2013-10-22 68 views
1

我工作的幾個knockout.js在我的業餘時間一些當前/未來的項目我會做結合處理的最佳方法,我想知道什麼是最好的方法傳遞多個參數是。 Link to example bindings(而不是用於生產)什麼是將數據傳遞到自定義綁定處理

例如,我有一個 「cssAnimateVisible」 結合處理,看起來像這樣:

HTML:

<div data-bind="cssAnimateVisible: isCssAnimateVisible">Animation</div> 

的Javascript:

self.isCssAnimateVisible = ko.observable(false); 

我可以把可觀察的關閉和打開,它會發揮WHA Tever默認動畫我希望它能夠在該元素上播放。大多數情況下,這個工作很好,很棒。但是,如果我想更改默認的動畫,其他的東西比在進出彈跳我必須這樣做:

​​

正如你所看到的,我傳遞了更多變數,因爲我不希望爲此特定元素使用默認動畫。這種方法是我目前在我的項目網站上,但我不喜歡傳遞一個名爲「可觀察」的變量,因爲這似乎使html控件膨脹起來,所以我將其縮小到這個範圍:

<div data-bind="cssAnimateVisible: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'">Animation</div> 

正如你所看到的,它比上述短了很多,但它確實需要其他的參數去「cssAnimateVisible」的背景下,這可能是一個潛在的不利因素,由於命名衝突與其他自定義綁定有人可能的。

而且,我想到了剛剛傳遞變量是這樣的:

<div data-bind="cssAnimateVisible: { isCssAnimateVisible, 'flipInY', 'flipOutY' }">Animation</div> 

這使得即使有知道的參數的順序中傳遞的代價越短

最後,我想到剛剛在animate.css庫創造了許多不同的結合處理程序,爲各種動畫像這樣:

<div data-bind="cssBounceVisible: isCssAnimateVisible1">Animation</div> 
<div data-bind="cssFlipVisible: isCssAnimateVisible2">Animation</div> 
<div data-bind="cssLightSpeedVisible: isCssAnimateVisible3">Animation</div> 

這種方法增加了我的項目中的代碼行並沒有給予足夠的靈活性。儘管如此,它可能是最短的數據綁定。

有誰知道處理這個最好的方法?我想在我的方法中保持一致,而不是任何事情。謝謝!

回答

1

最好是基於長期觀點,但也有包裝在一個對象綁定觀察到的數據的文字或使用對於每個可測量單獨綁定名稱之間的差異的技術。

如果你想支持寫入任何觀察對象,那麼你需要爲每個要綁定的觀察對象使用單獨的綁定名稱,否則ko.expressionRewriting.writeValueToProperty將無法​​寫入無觀察對象。

相關問題