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

Question

所以我在网络应用程序中同时使用 knockoutjs (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 结构。但老实说，我不知道如何(重新)将我的绑定(bind)应用到生成的 fancyform 代码或在更改值后重新实例化 fancyform，所以我希望你能在这里帮助我。

JSFiddle 显示问题。只需将“weekView”更改为“monthView”即可看到另一个下拉列表没有消失: http://jsfiddle.net/fnmav1e8/8/

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

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

$("select").transformSelect();

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

最好的问候，多米尼克

Answer 1

Bootstrap 和 Fancy Forms 等 UI 工具包经常重写 DOM 以引入标准小部件的程式化版本。控制它们在 Knockout 中可见性的技巧是将 Knockout 绑定(bind)放在小部件周围的容器上。

    <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 工作.