Knockoutjs 和 FancyForms：可见绑定不适用于使用 transformSelect 的选择框

Question

所以我在网络应用程序中同时使用 knockoutjs (v 3.2.0) 和 fancyforms (v 1.4.2) 发现了以下问题：

我有两个 select 框（在后面称为 "dropdown"）和 html 页面上的两个链接。

现在所需的行为如下（只是一个简短的伪代码，请参阅下面的 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/

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

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

$("select").transformSelect();

但遗憾的是我需要该应用程序与 fancyform 一起工作，所以我希望你们中的一些人能帮助我！

此致，多米尼克

Answer 1

UI 工具包如 Bootstrap 和 Fancy Forms 经常重写 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, which has the advantage of working in virtual tags。

Knockoutjs 和 FancyForms：可见绑定不适用于使用 transformSelect 的选择框

Knockoutjs & FancyForms: visible-binding not working on selectboxes using transformSelect

javascript

data-binding

jquery

knockout.js

fancyform