在一个数据绑定中应用knockout if和options绑定在一起

Question

I am trying to move an if statement into a data-bind but i am running into an error stating:

Multiple bindings (if and options) are trying to control descendant bindings of the same element.

what i am trying to do is to control the visibility of a dropdown list so it doesn't appear based on the if statement condition. I tried to use the visible bind but it only removed the dropdown elements not the actual dropdown.

This is what i am currently attempting:

<select id="IdField" name="Id" data-placeholder="Select an item" data-bind="if: items().length > 0, options: items(), optionsText: 'Name', optionsValue: 'Id', value: DdlSelectedValue, event: { change: selectChanged }">
                </select> 

This is what my original code looked like:

 <!-- ko if: items().length > 0 -->
                <select id="IdField" name="Id" data-placeholder="Select an item" data-bind="options: items(), optionsText: 'Name', optionsValue: 'Id', value: DdlSelectedValue, event: { change: selectChanged }">
                </select>
            <!--/ko-->

is there a way i could move the if statement into the data-bind with the options?

Answer 1

What you have is the correct way if you want the select to actually be absent from the page when items().length is zero.

Alternately, you could use visible , which is of course slightly different (when items().length is 0, the select will be there, it'll just be hidden):

<select id="IdField" name="Id" data-placeholder="Select an item" data-bind="visible: items().length > 0, options: items(), optionsText: 'Name', optionsValue: 'Id', value: DdlSelectedValue, event: { change: selectChanged }">
</select>