Knockoutjs＆FancyForms：可見結合工作不使用transformSelect

selectboxes

所以我發現使用knockoutjs（V 3.2.0）和fancyforms（V 1.4.2）一起在一個web應用以下問題：Knockoutjs＆FancyForms：可見結合工作不使用transformSelect

我已經有兩個select框（下稱「下拉框」）和一個html頁面上的兩個鏈接。

現在所期望的行爲是下面的（只有很短的僞代碼，請參閱下面的jsfiddle情節）：

if(dropdown1.value == "a1"){ 
    dropdown2.value = "b3"; 
    dropdown2.hide() 
    chosenlinkbutton = chosenlinkbutton1; 
    chosenlinkbutton2.hide(); //realized via knockoutjs-visiblebinding and a param 
} else { 
    //show and reset stuff... 
}

的問題是：我的第二個下拉沒有得到隱藏。相反，會出現另一個下拉菜單。當我調查這個問題時，我發現這是因爲fancyform會將實際的選擇框轉換爲ul/li-list結構。但說實話，我不知道如何（重新）將綁定應用於生成的fancyform代碼，或者在更改值後重新實例化fancyform，所以我希望你能幫助我。

JSFiddle顯示問題。只要改變「weekView」到「monthView」看到其他下拉並沒有消失： http://jsfiddle.net/fnmav1e8/8/

和帶有註釋的fancyform工作的jsfiddle： http://jsfiddle.net/fnmav1e8/7/

在這個版本中，我其實只是註釋掉該行

$("select").transformSelect();

但遺憾的是我需要該應用程序與fancyform工作，所以我希望你們中的一些人可以幫助我在這裏！

最好的問候，多米尼克

來源

2015-08-03 Dominik

http://jsfiddle.net/eawa16g2/ – mirage

wuah ....閱讀您的代碼：10s。認識到knockoutjs有基於評論的綁定：30分鐘！非常感謝，正是我需要的！如果你願意的話，只需要創建一個答案（幾行解釋會很好！）。如果你願意，我會明天做:) – Dominik

另外請注意：如果你想使用'visible'（它不能在虛擬標籤中工作）而不是'if'，你可以將這個元素包裝在一個'div '。 http://jsfiddle.net/fnmav1e8/13/ –

UI工具包像引導和花式形式往往重寫DOM引進標準的部件程式化版本。在Knockout中控制其可見性的技巧是將Knockout綁定放在小部件周圍的容器中。

<div data-bind="visible:isWeekView"> 
     <select id="selectCals" data-bind="value: mode"> 
      <option value="default">Default</option> 
      <option value="defaultplus">Standard plus</option> 
      <option value="none">nothing</option> 
     </select> 
    </div>

或者，您也可以使用if binding，這在virtual tags工作的優勢。

來源

2015-08-03 19:51:26

好的，所以你得到了答案:)謝謝你的解釋和可見部分，但！ – Dominik

Knockoutjs＆FancyForms：可見結合工作不使用transformSelect

回答

相關問題