javascript - Knockoutjs和FancyForms:使用transformSelect的可见绑定(bind)不适用于选择框

因此，我在Web应用程序中同时使用基因敲除js（v 3.2.0）和fancyforms（v 1.4.2）发现了以下问题：

我在HTML页面上有两个select框（进一步称为“下拉列表”）和两个链接。

现在所需的行为如下（只是一个简短的伪代码，请参见下面的jsfiddle-scenarios）：

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/

一个工作正常的JSFiddle，带有注释掉的fancyform：
http://jsfiddle.net/fnmav1e8/7/

在这个版本中，我实际上只是注释掉了

$("select").transformSelect();

但是可悲的是，我需要该应用程序才能与fancyform一起使用，所以我希望你们中的一些人可以在这里帮助我！

最好的祝福，
多米尼克

最佳答案

诸如Bootstrap和Fancy Forms之类的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中工作的优势。