Knockout.js和FancyForms：可见绑定在使用transformSelect的选择框上不起作用

Question

so I discovered the following problem using knockoutjs (v 3.2.0) and fancyforms (v 1.4.2) together in a webapplication:

I've got two select boxes(referred to as "dropdown" further on) and two links on a html-page.

Now the desired behaviour is the following (just a short pseudocode, see below for 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...
}

The Problem is: my second dropdown does not get hidden. Instead, there appears another dropdown. As I investigated this problem , I found out it is because fancyform transforms the actual selectbox into ul/li-list structure. But to be honest I have no clue on how to (re-)apply my binding to the generated code of fancyform or to re-instantiate fancyform after changing the value, so I hope you could help me out here.

JSFiddle showing the problem. Just change "weekView" to "monthView" to see that the other dropdown does not disappear: http://jsfiddle.net/fnmav1e8/8/

And a working JSFiddle with commented-out fancyform: http://jsfiddle.net/fnmav1e8/7/

In this version, I actually just commented out the line

$("select").transformSelect();

But sadly I need the app to work with fancyform, so I hope some of you could help me out here!

Best regards, Dominik

Answer 1

UI toolkits like Bootstrap and Fancy Forms often rewrite the DOM to introduce stylized versions of the standard widgets. The trick to controlling their visibility in Knockout is to put the Knockout bindings on a container around the widgets.

    <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>

Alternatively, you can use an if binding , which has the advantage of working in virtual tags .