Knockoutjs,FancyForms:可视绑定在使用transformSelect的选择框上不起作用

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

本文关键字：transformSelect 选择 不起作用 FancyForms 可视 绑定 Knockoutjs      更新时间：2023-09-26

所以我发现了以下问题使用knockoutjs (v 3.2.0)和fancyforms (v 1.4.2)一起在一个web应用程序:

我在一个html页面上有两个select框(称为"下拉")和两个链接。

现在期望的行为如下(只是一个简短的伪代码，参见下面的jsfiddle-scenario): 
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绑定，它具有在虚拟标记中工作的优点。

相关文章：