Question

所以我在webapplication中一起使用knockoutjs（v 3.2.0）和fancyforms（v 1.4.2）发现了以下问题：

我有两个select框（进一步称为“下拉列表”）和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将实际的selectbox转换为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

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。

Knockoutjs＆amp; FancyForms：可见绑定不使用transformSelect在selectbox上工作

1 个答案: